当有更新的图像可用时，如何防止旧图像出现在页面重新加载时

How to prevent old images from appearing on page reloads when there are updated images available

本文关键字：图像 加载 新加载 更新 何防止      更新时间：2023-09-26

我必须不断更新我网站上的主图像，用户将转到该网站，但图像不会是更新版本，除非他们手动点击刷新。即使我输入"请点击刷新以查看更新的图像"，用户也会忽略这一点，我必须通过电子邮件向他们发送刷新按钮。我尝试过使用Javascript进行初始索引.html重新加载到实际站点，如下所示

初始索引.html：

document.location.href='index2.php?code=reload_page'

然后在索引 2.php：

$the_code = $_GET['code'];
  if($the_code == "reload_page")
    {
     $page = $_SERVER['PHP_SELF'];
     $sec = "1";
     header("Refresh: $sec; url=$page");
    }
  else
    {
      //load page regular
    }

我像这样尝试过，但它不起作用，在您点击刷新按钮之前仍然有旧图像。还有其他方法可以使用PHP或javascript/jquery来实现这一点吗？

图像不刷新的问题可能是在 Web 浏览器或服务器代理等上缓存的问题。这是配置问题，可能不依赖于您。绕过这一点的简单技巧是将时间戳添加到 img url。每次在index.php中重新生成内容时，只需向图像添加一些查询字符串，如下所示：

<?php
echo '<img src="my_image.png?ts='.time().'" />';
?>

它会欺骗您的浏览器和代理，使其成为另一个图像并防止缓存。

您可以使用计时器重新加载图像，并通过 AJAX 请求从另一个页面获取它们：

setInterval(function(){ 
  $.ajax({
    url: 'index2.php'
  }).done(function ( data ) {
    $('#image-div').html(data);
  }); 
}, 10000); // wait 10 seconds

看看 jQuery.ajax

将以下内容放在页面的头部部分，这将每 5 秒重新加载一次您的内容。

<meta http-equiv="refresh" content="5">

如果浏览器仍然缓存图像，因为 url 没有更改，那么在图像 url 的末尾放置一个随机查询字符串。您可以使用时间戳。

<img src="image.jpg?<?php echo time(); ?>">
相关文章：