javascript - 即使缓存了新图像也会发出http请求？

Question

我有一个 JavaScript 幻灯片放映，可以动态创建下一张幻灯片，然后将其移动到 View 中。由于图像实际上是 Sprite ，因此 src 是透明的.png，实际图像是通过 css 中的 background:url(.. 映射的。

每次(好吧，大多数时候)脚本创建一个新元素时，Firefox 都会对transparent.png 发出http 请求。我有一个远期过期 header ，并且 Firefox 尊重所有其他文件的过期时间。

有没有办法避免这些不必要的请求。即使服务器返回 304 unmodified 响应，如果 Firefox 能够尊重动态创建的图像的过期时间，那就太好了。

我怀疑如果我注入(inject)一个简单的字符串而不是使用new Element，这可能会解决问题，但我在Prototypes扩展Element对象上使用了一些方法，所以我想避免在我的 js 文件中出现一堆 html 字符串。

这是一个挑剔的问题，但我现在正在研究前端优化，所以我想我会解决它。

谢谢。

@TJ Crowder 这是两张图片:http://tinypic.com/r/29kon45/5 。第一个显示对 trans.png 的请求正在激增。第二个显示了标题的示例。谢谢

@all 只是重申一下:真正奇怪的是，即使所有图像都是通过相同的逻辑创建的，它只在大约一半的时间内发出这些不必要的请求。

Answer 1

我知道这并不能解决 Firefox 忽略缓存时间的原因，但您始终可以绕过该问题，而不对幻灯片使用图像标签。如果您将幻灯片设置为空 div 标签并仅将 Sprite 应用为背景，则 Firefox 无需再发出任何请求。

编辑:

根据this site的解释，Firefox 不会忽略您的缓存时间。如果图像已过期，则浏览器应该再次请求图像。如果时间尚未过期(在本例中发生这种情况)，则浏览器应该发出有条件的 GET 请求。我认为你无法摆脱它。

我认为 Firefox 只在一半的时间发出请求，因为它刚刚在上一个请求中收到了图像的“304 Not Modified”状态，并且希望在后续请求发生得足够快的情况下相信该状态。