Как правильно обновить страницу для отображения изображения

это должно быть очень легко, но я боролся в течение недели без каких-либо успехов, и поэтому я прошу вашей помощи. То, чего я хочу добиться, очень просто.

  • У меня есть очень простая, чистая HTML-страница (код ниже), которая показывает два изображения.

  • Изображения загружаются в тот же каталог через FTP

  • Страница обновляется каждые 10 секунд, так что если изображения изменились в течение интервала, они должны быть обновлены в представлении соответствующим образом

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

Что мне не хватает? Заранее большое спасибо за вашу помощь

<!DOCTYPE HTML>
<html>
   <head>
      <title>RePlay</title>
      <meta http-equiv = "refresh" content = "10">
   </head>
   <body id = "body" style = "text-align:center;">
      <h1 style = "color:green;" >
         RePlay
      </h1>
      <h2 style = "color:black;" >
      Courts Live Update
      </h1>
      <img src = "Image1.png" align = "left" width = "500" height = "333">
      <img src = "Image2.png" align = "right" width = "500" height = "333">
   </body>
</html>

Может быть, вы можете проверить ответ Амита Джоки здесь stackoverflow.com/a/22766914/8984764

Regn 05.04.2022 16:51
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
1
1
31
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я думаю, что это может быть проблема с кешем. Несмотря на то, что изображения после обновления отличаются, браузер показывает ранее кэшированные изображения, поскольку имя файла такое же. Возможно, попробуйте добавить параметр запроса в конец src изображения, чтобы обойти функцию кэширования браузерами изображений с одним и тем же src. Попробуйте написать так и посмотрите, работает ли это:

<!DOCTYPE HTML>
<html>

<head>
   <title>RePlay</title>   
   <meta http-equiv = "refresh" content = "10">
</head>

<body id = "body" style = "text-align:center;">
   
   <h1 style = "color:green;" >
       RePlay
   </h1>

   <h2 style = "color:black;" >
       Courts Live Update
   </h1>
   

   <img id = "img-1" src = "Image1.png" align = "left" width = "500" height = "333">
   <img id = "img-2" src = "Image2.png" align = "right" width = "500" height = "333">

</body>
<script>
 let img1 = document.getElementById('img-1');
 let img2 = document.getElementById('img-2');

 img1.src = 'Image1.png?t=' + new Date().getTime();
 img2.src = 'Image2.png?t=' + new Date().getTime();
</script>
</html>

В этом примере я добавляю дату и время к параметру запроса, чтобы обеспечить новое имя пути для изображения при каждом обновлении. Таким образом, браузер не будет пытаться кэшировать изображение, так как src каждый раз будет разным.

Большое спасибо за ваше предложение. Это определенно работает лучше, чем у меня, но все же требуется около трех обновлений (иногда меньше, иногда больше), чтобы действительно обновить изображение. Интересно, есть ли другие альтернативы для достижения моей цели...

Simon Schvartzman 05.04.2022 17:32

@SimonSchvartzman Это не проблема, возможно, попробуйте изучить эту проблему, рассмотрев ее как проблему с кешем - вы, вероятно, получите более подходящие ответы. Проверьте это и убедитесь, что какие-либо из этих предложений работают правильно: stackoverflow.com/a/22429796/10719637.

Jeith 05.04.2022 17:43

Другие вопросы по теме