Javascript下载图像一次设置两个图像标记的src

我想在我正在构建的网页上做一些性能改进，并且我正在做的事情之一是使用JavaScript，下载通过创建Image()对象来创建图像，并将其src属性设置为给定的URL。Javascript下载图像一次设置两个图像标记的src

我再经手onload事件的对象，并在处理程序中，我使用的对象src属性设置页面上的两个<img>元素src属性。我是希望这样做只会下载图像一次，然后使用该下载的图像作为页面上的两个图像元素的src，但这似乎并没有发生。

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

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

var image = new Image() 

image.onload = function() { 
    $('#img1').attr('src', image.src); 
    $('#img2').attr('src', image.src); 
    image = null; 
} 

image.src = 'my/image/url';

UPDATE：这是什么原因造成我相信，图像被下载两次。再说一遍......我可能是错的，也许这是误导性的，但是如果Chrome开发工具在网络标签上报告两个不同的“资源”，每个都有相同的路径，相同的文件大小，但不同的时间，表明其实际下载了两次？也许我的问题是我使用，我不知道开发者工具...

enter image description here

来源

2012-02-03 Bob Yexley

只是好奇，从你的代码它看起来不像图像的变化。你有没有考虑过这样做不是用jQuery，而是用一些CSS操作？ – skyburner 2012-02-03 19:33:02

是什么让你认为图像会被多次下载？浏览器将下载图像并将其放入缓存中。如果在网页上再次出现相同的图像，它将从缓存中加载。 – 2012-02-03 19:48:15

@skyburner：我没有考虑过，但这只是我的代码的一小部分。这些图像中的每一个实际上都会被操纵，并且每个图像都被页面上的其他jQuery插件所占用，所以我不认为这会是这种情况的一种选择。谢谢你的想法。 – 2012-02-03 19:48:41

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

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

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

http://dumitruglavan.com/jquery-image-cache-plugin-cache-images-in-browsers-local-storage/

来源

2012-02-03 19:35:23 ShankarSangoli

您也可以尝试在背景图片设置为类和类添加到你所需要的元素。

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

来源

2012-02-03 19:44:57 kiranvj

Javascript下载图像一次设置两个图像标记的src

回答

相关问题