Обновите изображения на веб-странице, не обновляя sh всей страницы

Question

Я JavaScript новичок. Я использую flask для интеграции моего кода python с внешним интерфейсом (обычный JS, HTML и CSS).

По сути, у меня есть веб-страница, содержащая изображение (или, скорее, фрагменты изображения) слева, а результаты поиска - справа. Когда пользователь выбирает конкретную плитку в изображении, он отправляется на сервер для обработки, которая сохраняет результаты (похожие по форме плитки) в папку. Они должны быть получены автоматически с правой стороны веб-страницы.

Проблема в следующем: страница загружается первой, когда я запускаю приложение flask, и поскольку папка результатов в начале содержит изображения с предыдущего сеанса они загружаются. Кроме того, после обработки python мне нужно вручную обновить страницу sh, чтобы загрузить результаты.

Я попытался: Написание функции setInterval для обновления источника изображения после интервал каждые 5 секунд, чтобы при появлении новых результатов они могли автоматически отображаться. Код написан ниже. Очевидно, эта функция вообще не работает (я вставил в console.log () операторы, но они ничего не отображают):

JAVASCRIPT--------->
setInterval(function(){
    var images=document.getElementsByTagName('img');
    for(var i=0;i<images.length;i++){
      var dt=new Date();
      console.log(dt); //does not display anything on the console
      var img=images[i];
      if(img.id!='MainIMAGE')    // reload all images except image with id MainIMAGE
        {
           img.src=img.src+"?"+dt.getTime();
           console.log(img.src);  // does not display anything as well
        }
   }
},5000);

Это правильное решение? Или есть другой подход к этому?

Answer 1

Я предложил использовать searchParams , а не поиск

const images = [...document.querySelectorAll('img:not(#MainIMAGE)')]; // assuming no dynamic images inserted
setInterval(() => {
  images.forEach(img => {
    const url = new URL(img.src);
    url.searchParams.set('time', new Date().getTime());
    img.src = url.href;
  })
}, 2000);

<img src="https://placeimg.com/100/100/any" /><br/>

<img id="MainIMAGE" src="https://placeimg.com/200/200/any" />

Answer 2

Вы можете использовать URL, чтобы избежать объединения предыдущего time параметра:

setInterval(function() {
  var images = document.getElementsByTagName('img');
  for (var i = 0; i < images.length; i++) {
    var dt = new Date();
    console.log(dt); //does not display anything on the console
    var img = images[i];
    if (img.id != 'MainIMAGE') // reload all images except image with id MainIMAGE
    {
      const url = new URL(img.src);
      url.search = 'time=' + dt.getTime();
      img.src = url.href;
      console.log(img.src + ' ' + dt); // does not display anything as well
    }
  }
}, 1000);

<img src="https://placeimg.com/200/200/any" />