javascript - 如何阻止浏览器对 JS 中的 IMG.SRC 更改发送额外请求

Question

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

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

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

根据分析器，此类请求平均需要大约 30 毫秒，而浏览器无论如何都会从缓存中加载图像。

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

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

将缓存和图像作为预加载器中的对象并仅切换它们怎么样？

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

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

Answer 1

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

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