1

我正在使用 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");
}
4

1 回答 1

1

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

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

于 2013-10-09T21:27:09.040 回答