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

【问题标题】：How to prevent old images from appearing on page reloads when there are updated images available当有可用的更新图像时，如何防止旧图像出现在页面重新加载中
【发布时间】：2012-06-13 04:47:26
【问题描述】：

我必须经常更新我网站上的主要图片，用户会访问该网站，但除非他们手动点击刷新，否则这些图片不会是更新版本。即使我输入“请点击刷新以查看更新的图像”，用户也会忽略这一点，我必须通过电子邮件发送给他们以点击刷新按钮。我尝试使用像这样的 Javascript 将初始 index.html 重新加载到实际站点

初始index.html：

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

然后在index2.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 完成此任务的方法？

【问题讨论】：

我不明白。谁更新您的图像？为什么需要刷新页面？

标签： php javascript jquery image refresh

【解决方案1】：

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

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

它会欺骗您的浏览器和代理，认为它是另一张图片并阻止缓存。

【讨论】：

【解决方案2】：

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

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

看看jQuery.ajax

【讨论】：

我这样做了，我什至摆脱了 html 前端加载器页面，我只是在 div 中添加了一个包含所有图像的类，并使用 ajax 从中重新加载数据！ setInterval(function(){ $.ajax({ url: 'index.php' }).done(function ( data ) { $('.reloader').html(data); }); }, 1000); // 等待 1 秒

【解决方案3】：

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

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

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

<img src="image.jpg?<?php echo time(); ?>">

【讨论】：