это должно быть очень легко, но я боролся в течение недели без каких-либо успехов, и поэтому я прошу вашей помощи. То, чего я хочу добиться, очень просто.
У меня есть очень простая, чистая 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>
Я думаю, что это может быть проблема с кешем. Несмотря на то, что изображения после обновления отличаются, браузер показывает ранее кэшированные изображения, поскольку имя файла такое же. Возможно, попробуйте добавить параметр запроса в конец 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 каждый раз будет разным.
Большое спасибо за ваше предложение. Это определенно работает лучше, чем у меня, но все же требуется около трех обновлений (иногда меньше, иногда больше), чтобы действительно обновить изображение. Интересно, есть ли другие альтернативы для достижения моей цели...
@SimonSchvartzman Это не проблема, возможно, попробуйте изучить эту проблему, рассмотрев ее как проблему с кешем - вы, вероятно, получите более подходящие ответы. Проверьте это и убедитесь, что какие-либо из этих предложений работают правильно: stackoverflow.com/a/22429796/10719637.
Может быть, вы можете проверить ответ Амита Джоки здесь stackoverflow.com/a/22766914/8984764