javascript - 如何防止两次加载相同的图像

Question

这些代码很好。它加载图像以计算尺寸，然后添加到新的图像标签中。

var img = new Image();
var box = $('picBox');

img.onload = function() {
    var w = this.width;
    var h = this.height;    
    box.appendChild(img);       
};
img.src = image_url;

但在下面的例程中，似乎同一张图片被加载了两次。一次用于计算尺寸，另一次用于设置背景图像。有没有办法像上面那样做。提前致谢。

var img = new Image();
var box = $('picBox');

img.onload = function() {
    var w = this.width;
    var h = this.height;    
    box.setStyle('background-image', 'url('+image_url+')');
};
img.src = image_url;

Answer 1

第二次它将从浏览器缓存中加载它，因此您不必担心。 您可以在 firebug 中打开网络检查器来嗅探所有正在发送的请求，您将看到它第二次返回该图像的“未修改” header 。