Question

我目前正在网上拍卖网站上工作（很抱歉，我不能在这里分享链接）。在产品列表中，我们的客户希望产品映像在从后端进行修改时实时动态更新。下面的解决方案可以解决问题：

var nocache = new Date().getTime();             
$('#auction_id_' + aucId + ' img#' + imgID).attr("src", 'ItemPics/t' + new_image_url + '?' + nocache);

但是，当用户访问产品然后单击后退按钮返回产品列表页面时，产品图像的缓存不会被清除，旧图像也会恢复。

我无法在网站上禁用缓存，因为它会导致客户端加载过多。

（1）我考虑过创建一个隐藏的iframe，将图像作为SRC，然后在实时刷新。（2）简单地重新加载页面不会解决问题因此我还考虑使用JavasSript来操作Ctrl + F5以强制在用户点击后退按钮时请求新的图像数据=但我不认为这些都是正确的这样做的方法。

非常感谢任何想法，谢谢！

Answer 1

您的网络服务器中可能有一个配置，它使用Cache-Control: no-cache, max-age=0, must-revalidate, no-store返回图像请求的HTTP标头。这会强制浏览器不将图像数据存储在我相信的缓存中。

查看firefox中如何处理缓存控制标头：https://developer.mozilla.org/en-US/docs/Web/HTTP/Caching_FAQ

Answer 2

您面临的问题不是图像被缓存，而是整个页面都是。
因此，当您从历史记录返回时，脚本不会被执行，并且图像仍具有相同的no-cache参数(see this answer for more info)。

解决此问题的一种解决方案是使用window.onpageshow事件处理程序（使用lack of support for IE<11）或在window.onunload事件处理程序中调用空函数。

if('onpageshow' in window){
  window.onpageshow = changeImgSrc;
}else {
  window.onload = changeImgSrc;
  window.onunload = function(){};
}

Answer 3

谢谢大家，我的同事已经能够解决问题了：

在产品列表页面中，为图片添加唯一ID：

<img src = "images/img1.jpg" id = "image_<?php echo $imageID; ?>" />

在后端，单击更新图像按钮时，将新图像存储在会话变量中：

session_start();
$_SESSION['modified_item_images'][$ItemID] = $strNewPicName;

然后在您的产品列表页面中，将更新的图像数组存储到JavaScript变量中：

var modified_item_images = <?php echo json_encode($_SESSION['modified_item_images']); ?>;

然后遍历每个项目并在每个更新的图像链接的末尾添加时间戳：

$(document).ready(function() {

// Append updated images on back button click
if(modified_item_images){
    $.each( modified_item_images, function( key, image_src ){
        var nocache = new Date().getTime(); 
        $('body').find('#image_' + key).attr('data-original', 'ItemPics/t' + image_src + '?' + nocache);
    });
}

因此，当用户点击产品并点击其浏览器的“后退”按钮时，我们将检查会话变量中是否存在更新的图像，如果是，则我们会使用新的时间戳重新附加它们以防止浏览器从缓存中渲染旧图像。这仅适用于动态修改的特定图像，可解决问题。

清除特定图像的缓存

3 个答案: