Question

我正在尝试在我正在构建的网页上进行一些性能改进，而我正在做的事情之一就是使用javascript，通过创建Image()对象来下载图像，并将其src属性设置为给定的网址。

然后我处理该对象的onload事件，在处理程序中，我使用对象src属性来设置src属性为{{1}页面上的元素。我希望希望做的只是下载图像一次，然后将下载的图像用作页面上两个图像元素的<img>，但似乎没有发生了什么。

通过使用Firebug和Google Chrome开发工具查看网络信息，我可以看到，在页面上设置两个图像元素的src属性似乎会导致实际下载图像两次，每套一次

它的图像相同，而且相当大...所以下载非常耗时。有没有办法可以强制图像只下载一次？这是我的代码：

src

更新：这是让我相信图片被下载两次的原因。再说一遍......我可能错了，也许这是误导性的，但如果Chrome开发工具在网络选项卡上报告两个不同的“资源”，每个都有相同的路径，相同的文件大小，但不同的时间，不会表明它实际上被下载了两次？也许我的问题在于我正在使用的开发工具，我不知道......

enter image description here

Answer 1

src只是url指向服务器上的图像。如果设置图像的src，它将刷新图像。

如果网址没有更改，浏览器会缓存图片。即使您在控制台中看到图像请求，但它仍然来自缓存，除非您已禁用缓存。

现代浏览器支持本地存储，您可以在其中缓存所需的任何静态资源。看看这个jQuery Image Cache插件，它可能会对你有所帮助。

Answer 2

您还可以尝试将背景图像设置为类，并将该类添加到您需要的元素中。

当您分配第二个src时，浏览器将检查服务器是否更改了图像（可能使用某种文件哈希机制），如果服务器和缓存中的图像都相同，浏览器将加载来自缓存的图像，仍然会在Firebug控制台中看到对服务器的请求。