如何防止兩次加載相同的圖像

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

這似乎工作正常使用MooTools。 Tested it on JSFiddle。如果您打開控制檯並觀看，它只會記錄一次數據。此外，使用.setStyles()和對象表示法來調整元素的寬度和高度：

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

Answer 2

第二次它會從瀏覽器緩存中加載它，所以你不必擔心它。 您可以在螢火蟲中打開網絡檢查器來嗅探正在發送的所有請求，並且您將會看到第二次返回該圖像的「未修改」標頭。