从 CSS 中多次请求图像答案

【问题标题】：Images being requested multiple times from CSS从 CSS 中多次请求图像
【发布时间】：2011-09-27 01:17:27
【问题描述】：

知道什么会使样式表多次加载图像吗？图片是同一个 URL，没什么特别的。

编辑：仅在 iPhone“模式”和默认“模式”的 safari (5.0.3) 中发生 - 我无法在 FF 或 IE 中重现该问题。

Apache_access_log 表示该图像确实被多次访问。

当添加一个一个一个地调用图像的样式时，它们似乎没有遵循任何关于何时开始加倍的模式。

我还尝试将图像显着缩小，以查看是否是缓存问题。没有改变任何东西。

【问题讨论】：

我认为 CSS 文件是同时请求的，所以除非在请求 CSS 文件之前加载图像，否则它可能会多次加载图像。
在你的 url 中确实有某种缓存破坏器（即一个随机数作为附加到 url 的查询字符串？，比如/someimage.jpg?1234346758）
不——图像始终是相同的 URL，并且 .htaccess 忽略图像。我确实有多个 css 工作表——我必须 grep 'em 并查看负载数量是否与其中包含该 img 的工作表数量相匹配。
图片网址重定向（302）？因为没有缓存 302。
不——当它们被缓存时，我得到的是 304。我正在做移动开发，所以我只是想尽量减少首次加载。

【解决方案1】：

不确定与 Safari 有什么关系，但显然：

如果引用同一个 sprite-sheet 的 CSS 规则没有组合在一起，它将多次请求图像。（虽然不是呼叫出现的全部次数）。

#divOne, #divTwo, #divThree {
    background-image: url('IMGURLHERE');
}

这将请求一次图像。

#divOne {
    background-image: url('IMGURLHERE');
}

#divTwo {
    background-image: url('IMGURLHERE');
}

这将请求图像两次。

不知道为什么会这样。

【讨论】：