页面重新加载时 Firefox 挥之不去的图像答案

【问题标题】：Firefox lingering images on page reload页面重新加载时 Firefox 挥之不去的图像
【发布时间】：2013-10-17 10:52:27
【问题描述】：

我使用的是 Firefox 24.0。这个问题（见标题）似乎不是缓存问题。图像实际上重新加载；但是，之前的图像会一直显示，直到新的图像可用为止。就我而言，这会产生一个充满图像的页面，这些图像在不同时间刷新，很难看出什么是新内容和什么是旧内容。 IE 和 Chrome 都没有这个问题，因为在新的图像准备好之前不会显示图像。

我想到的唯一解决方案是在图像 URL 中添加时间戳或随机数，或者使用 javascript 隐藏图像直到图像加载，然后显示它。但是，如果可能的话，我想要一个更简洁的解决方案，在服务器端，比如指定一些标题，让 Firefox 忘记旧图像。

这是显示烦人效果的代码。变体 1 在 Firefox 中效果不佳：

<html>
<head></head>
<script type="text/javascript">
    function AddImage() {
        var imgElem = document.createElement('img');

        // Variant 1
        imgElem.setAttribute('src', 'http://localhost/ImageServer.asmx/GetImage');

        // Variant 2
        //imgElem.setAttribute('src', 'http://localhost/ImageServer.asmx/GetImage?r=' + Math.random());

        // Variant 3
        //imgElem.setAttribute('src', 'http://localhost/ImageServer.asmx/GetImage');
        //imgElem.style.display = 'none';
        //imgElem.setAttribute('onload', 'this.style.display = "block"');

        document.body.appendChild(imgElem);
    }
</script>
<body onload="AddImage()">
</body>
</html>

为了完整起见，这里是服务器端代码，它是一种老式的 Web 服务，它在两个图像之间交替并添加延迟以显示挥之不去的效果。

static int imgNumber = 2;

[WebMethod]
public void GetImage()
{
     Thread.Sleep(2000); // Delay to see the effect of the lingering image

     HttpContext.Current.Response.AppendHeader("Cache-Control", "private, max-age=0, s-maxage=0, no-cache, must-revalidate, proxy-revalidate");

     imgNumber = imgNumber % 2 + 1;
     string strPathPrefix = @"A:\Path\";
     HttpContext.Current.Response.WriteFile(strPathPrefix + imgNumber + ".png");
}

【问题讨论】：

标签： html firefox caching web

【解决方案1】：

您的“变体 2”方法（通过在末尾附加随机生成的数字来生成唯一 URL）是完全有效的，并且是一种广泛使用的防止缓存的方法。

我强烈建议您这样做，而不是尝试解决缓存控制标头的问题，因为它们可能不可靠。一些 CDN 甚至会忽略缓存标头以试图节省带宽等。

【讨论】：