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中打开网络检查器来嗅探所有正在发送的请求，您将看到第二次返回该图像的“未修改”标题。

Answer 2

这似乎可以使用MooTools。 Tested it on JSFiddle。如果您打开控制台并观看，它只会记录一次数据。此外，使用.setStyles()和对象表示法来调整元素的宽度和高度：

box.setStyles({
    'background-image': 'url(' + image_url + ')',
    'width': w,
    'height': h
});

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

2 个答案: