當緩存時，圖像寬度跟蹤零，隨着onload

Question

我正在構建一個Javascript的燈箱，我試圖在圖像加載後調整大小。我使用下面的代碼，它工作正常 - 它輸出一次加載正確的寬度。

我的問題：

當我刷新，它會立即從緩存加載圖像，似乎繞過負載。我得到一個寬度爲零的瞬間。爲什麼會發生？

我的代碼：

var oImage = new Image(); 

oImage.src = 'http://mydomain.com/image.png'; 

container.html(oImage); 

oImage.onload = function(){ 

    alert(this.width); 
} 

** 更新* *

@Alex：這是我和你的插件嘗試過的代碼，我想我可能做錯事。因爲你的插件看起來相當不錯，所以我很樂意讓它工作。

container.waitForImages(function() { 

    var cWidth = $(this).width(); 

    alert("width: "+cWidth); // returns 0 - works first time but not cached 

}); 

// Adding the image to the container for preload 

container.html('<img src="mygraphic.png" />'); 

Answer 1

您可能要切換.html()和.onload()電話。

如果圖像是從緩存中加載，比我想象的.html()呼叫完成前的腳本有機會到函數處理程序附加到圖像的onload事件。因此，有效地繞過負載事件本身（因爲圖像有已經加載）。

如果它仍在下載圖像（即未緩存），則在圖像完全渲染完成之前，將有足夠多的時間調用.onload附加。

當您處理它時，您可能想要這樣做jQuery方式，只是爲了使事件更加類似於DOM2而不是DOM0。

var image = $('<img/>', { 
    src : 'http://mydomain.com/image.png' 
}).load(function() { 
    alert(this.width); 
}) 
// maybe clear container before if you want 
.appendTo(container); 

如果我們將不得不設置src的onload後，我們不妨做這個：

var image = $('<img/>') 
    .load(function() { 
     alert(this.width); 
    }) 
    .attr('src','http://mydomain.com/image.png') 
    .appendTo(container) 
    ; 

希望的作品乾淨。