очистить фоновое изображение от кнопки ввода через 10 секунд

Я использую этот код, чтобы установить фоновое изображение на моей странице в течение 10 секунд после того, как это изображение очищено, но при перезагрузке страницы у меня есть последнее изображение, используемое на заднем плане.

Как очистить изображение раз и навсегда?

Другая проблема заключается в том, что я использую эту кнопку фона в веб-приложении для рисования, и иногда после изменения фона приложение зависает.

$(switchBackground);

var oFReader = new FileReader(),
    rFilter = /^(?:image/bmp|image/cis-cod|image/gif|image/ief|image/jpeg|image/jpeg|image/jpeg|image/pipeg|image/png|image/svg+xml|image/tiff|image/x-cmu-raster|image/x-cmx|image/x-icon|image/x-portable-anymap|image/x-portable-bitmap|image/x-portable-graymap|image/x-portable-pixmap|image/x-rgb|image/x-xbitmap|image/x-xpixmap|image/x-xwindowdump)$/i;

oFReader.onload = function(oFREvent) {
  localStorage.setItem('b', oFREvent.target.result);
  switchBackground();
};

function switchBackground() {
  $('body').css('background-image', "url(" + localStorage.getItem('b') + ')');    
}

function loadImageFile(testEl) {
  if (! testEl.files.length) { return; }
  var oFile = testEl.files[0];
  if (!rFilter.test(oFile.type)) { alert("You must select a valid image file!"); return; }
  oFReader.readAsDataURL(oFile);
}
<input id="test" type="file" onchange="loadImageFile(this)" />

демонстрация

2 ответа

  1. если вам нужно очистить фон после 10 секунд, поэтому, пожалуйста, измените функцию согласно ниже.

    var obj;
    function switchBackground() {
      $('body').css('background-image', "url(" + localStorage.getItem('b') + ')');   
      clearTimeout(obj);
      obj = setTimeout(function(){
                  $('body').css('background-image','none');   
                }, 10000);
    } 
    

    и если вы также хотите, чтобы удалить изображение в локальном хранилище после 10 секунд так удалить jstorage скрипт в функции setTimeout