高速緩存時，圖像寬度跟蹤為零

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

你需要做一些事......

• 檢查img元素的complete屬性。
• 在設置src屬性之前附加load事件。

此外，我發現創建一個新的Image並分配src是確定圖像是否已加載的最佳方法。

Answer 2

您可能想要切換.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);

如果我們要在onload之后設置src ，我們不妨這樣做：

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

希望這很干凈。

Answer 3

回答JavaScript：了解圖像何時完全加載建議您在設置src之前設置onload