清除特定图像的缓存

Question

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

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

您可能在您的网络服务器中配置了 returns HTTP header 用于使用 Cache-Control: no-cache, max-age=0, must-revalidate, no-store 的图像请求，这将强制浏览器不将图像数据存储在缓存 i相信。

查看 cache-control headers 在 firefox 中的处理方式：https://developer.mozilla.org/en-US/docs/Web/HTTP/Caching_FAQ

Answer 2

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

解决此问题的一个解决方案是使用 window.onpageshow event handler (with a 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']); ?>;

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

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

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

清除特定图像的缓存

Clear cache of specific image

javascript

image

browser-cache