Question

当我将图像包含为＆lt; img＆gt;时标签以及DOM元素上的背景图像，浏览器有时会对同一图像发出两个请求。使用hover伪属性时有时也会发生这种情况。例如：

<html>
<head>
<style>
    div{
        background: transparent url(/img/stuff.png) no-repeat;
    }
    div:hover{
        background: transparent url(/img/stuff.png) no-repeat 25px 0px;
    }
</style>
</head>
<body>
    <img alt="" src="/img/stuff.png"/>
    <div>
    </div>
</body>
</html>

为什么要求图像两次（或可能三次）？这是我可以避免的行为吗？如果是这样的话？

[编辑]

我在观看Google appengine本地服务器进程时注意到这一点，所以我很确定它实际上并没有被浏览器缓存（如果我在firebug或webkit检查器中看到它的话可能会这样）。

我在Google Chrome，IE7和Firefox 3中看到了这一点。

Answer 1

这是IE6的一个已知问题，是你遇到问题的浏览器吗？

此处列出了几个原因和解决方法：

http://www.fivesevensix.com/studies/ie6flicker/

Answer 2

我在自己的大型Web应用程序中看到过使用大量图像的类似行为。即使使用JavaScript预加载，图像有时也会被请求第二次（尽管我没有仔细观察，看看是否有任何请求超过两次。

我的结论是浏览器的缓存可能已满，并且可能已启动熵，删除旧项目或当前未使用的项目。尝试增加浏览器的最大缓存大小，并查看行为是否继续。此外，在Firefox中，您可以结帐about:cache。

Answer 3

对我来说，这似乎是一个浏览器缓存问题。

您可以尝试预加载它：

<img alt="" src="/img/stuff.png" style="display: none;"/>

但我不确定这是否有效。

Answer 4

答案取决于您如何发现图像请求的次数。您是否在客户端观看Web服务器日志或使用类似Firebug的内容？尝试在您的问题中发布更多详细信息。

无论如何，似乎浏览器应该从缓存中获取图像。

Answer 5

我有同样的行为。请求两次的图像，它有两个来自服务器的请求，一个来自css文件作为请求引用，另一个来自aspx或htm文件作为请求引用。我用firebug 1.5和其他HTTPparser程序试过这个。

HTML背景图像

5 个答案: