如何阻止浏览器发送关于 JS 中 IMG.SRC 更改的附加请求答案

【问题标题】：How to stop browser from sending additional request on IMG.SRC change in JS如何阻止浏览器发送关于 JS 中 IMG.SRC 更改的附加请求
【发布时间】：2013-03-20 12:45:02
【问题描述】：

我正在开发一个应用程序，其中图像会根据不同的用户操作更改其来源。大约有 200 张图片可以以这种方式显示，我确信它们会在某个时候显示至少 90% 的折扣。

为了防止闪烁，我添加了图像预加载器。

但是，当我更改 IMG 的 SRC 属性时，浏览器会发送一个新的 Get 请求，即使图像已经加载。

根据分析器，这样的请求平均需要大约 30 毫秒，所发生的只是浏览器从缓存中加载图像。

有没有办法阻止浏览器发送额外的请求并直接显示图像，或者这是不可能的？

如果不可能，将所有 200 张图像放入代码中，然后切换一个可见（或更精确地显示），这会是一种不好的做法吗？

如何在预加载器中缓存和图像作为对象并仅切换它们？

我正在考虑的另一件事是将所有这些图像放入一个精灵并仅更改背景位置。

你认为最好的选择是什么？

【问题讨论】：

我想，这里的大小肯定很重要。 ) 如果您的图像很小，则可以使用 sprite 技术，否则我会使用 Image 对象。
您是否在图像响应上设置 HTTP 缓存标头。 GET 请求是返回完整图像，还是仅返回 304 Not Modified？
不，它们返回 200，（从缓存中），其中大约一半需要 5 毫秒，但另一半需要 30 到 80 毫秒。但是，更改发生的频率为每 100 毫秒，所以 30 - 80ms 相对来说太多了。

标签： javascript html browser httprequest

【解决方案1】：

对于您所描述的快节奏图像交换类型，我推荐 CSS Sprites。如果您的图片很大，并且您的观众可能包括相当数量的低速用户，这可能不是最佳选择，但您可以采取一些措施来隐藏它（例如首先加载一个小的静态图片，然后将其换成较大图像完成加载后的动态元素）。

网站的其他方面从未完成，但我们在http://www.premiumframes.com/ 上使用了这些类型的大规模精灵技术来进行分层图像切换并填充下拉选择器中的图像。加载了相当多的数据，但对于能够负担得起框架的观众来说，该公司对性能非常满意。我怀疑您的需求不会像它所需要的那么极端，因此您应该能够为中低端用户实现更好的性能。

【讨论】：

感谢您的建议。老实说，由于整个网站有 20 Megs 的图像，我们并没有期待和慢速用户。它基本上更像是一部用 JS 和 CSS 制作的电影。我们的问题是动画中的故障，所以我现在正试图找到可以删除的任何位，这个 http 请求似乎绝对是多余的，或者至少我会想到。现在在我看来，浏览器必须完成请求，甚至从缓存中加载图像。我现在在精灵和切换多个对象之间做出决定。