清除特定图像的缓存

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);
    });
}

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