Javascript: добавление и удаление изображения из DIV в цикле setTimeout

Question

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

window.onload=function image_show() {
  var thumbContainer = document.getElementById("art_img");
  var thumbnail = document.createElement("img");
  var img_width = document.getElementById("art_img").offsetWidth;
  var img_height = document.getElementById("art_img").offsetHeight;
  thumbnail.onload=function() { 
    thumbContainer.appendChild(thumbnail);
  }
  thumbnail.src = "http://xyz/bkg.png";
  thumbnail.width = img_width;
  thumbnail.height = img_height;
  setTimeout(image_show, 1000 );
}

Метод appendChild() продолжает добавлять изображения (одно под другим) после тайм-аута.Но я хочу продолжать обновлять div с тем же изображением.

Источник изображения будет обновлен на моем веб-сайте с тем же именем, и я хочу, чтобы скрипт отображал новое изображение после истечения времени ожидания.Я пытался вставить метод removeChild() непосредственно перед appendChild(), но не сработал, как ожидалось.Любая помощь будет оценена.

Answer 1

просто очистите элемент перед повторным добавлением

  thumbnail.onload=function() { 
    thumbContainer.innerHTML = ""; // ADD THIS LINE
    thumbContainer.appendChild(thumbnail);
  }

Answer 2

Проблема в том, что браузер кэширует изображение.

Попробуйте добавить метку времени к атрибуту src миниатюры:

thumbnail.src = "http://xyz/bkg.png?ts=" + Date.now();

Таким образом, исходный URL будет немного отличаться при каждом запуске функции image_show, и картинка должна бытьзагружается браузером каждый раз.