如何阻止浏览器在IMG上发送额外请求.JS中的SRC变化

How to stop browser from sending additional request on IMG.SRC change in JS

本文关键字：请求 JS 中的变化 SRC 浏览器何阻止 IMG 更新时间：2023-09-26

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

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

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

根据profiler，这样的请求平均需要大约30ms，并且浏览器无论如何都会从缓存中加载图像。

是否有一种方法可以防止浏览器发送额外的请求并直接显示图像或这是不可能的?

如果这是不可能的，这是一个不好的做法，把所有200个图像在代码中，只是切换到一个是可见的(或显示更精确)?

如何缓存和图像作为对象在预加载器，只切换他们?

我在考虑的另一件事是把所有这些图像放到一个精灵中，只改变背景位置。

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

对于你所描述的快节奏图像交换类型，我推荐使用CSS Sprites。如果你的图片是巨大的，你的受众可能包括相当数量的低速用户，这可能是次优的，但你可以采取一些措施来隐藏它(比如首先加载一个小的静态图像，然后在大图像加载完成后将其与动态元素交换)。

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