jQuery.load（）; 並非總是用圖像觸發

Question

我有一個腳本，該腳本在加載圖像時會淡入以防止加載丑陋的動畫 ，該腳本使用$（elem）.load（）;。 功能。

我的問題是，有時頁面上會有幾張尚未淡入的圖像。這可能是因為尚未觸發load事件。 我已經檢查了控制台是否有錯誤，但是什么也找不到……它並非總是會發生，但偶爾會發生。

劇本：

// Function to be applied to any element
jQuery.fn.preFade = function( speed, callback ) {
    this.load(function(){
        $(this).fadeIn(speed, callback);
    });
};

// The .prefade class has display: none; applied to it in my CSS
$(document).ready(function(){
    $('.prefade').preFade(1000);
});

最讓我感到困擾的是，盡管沒有觸發加載事件，但實際上是在加載圖像。 我之所以知道這是因為，當我檢查元素並將其更改為display：block; 從顯示：無； 圖像出現。

我有點不知所措，也許事件的調用順序有些缺失……

Answer 1

我在注釋中鏈接到一個解決方案，這就是它適合我的代碼的方式。

this.one('load', function(){
    $(this).fadeIn(speed, callback);
}).each(function(){
    if (this.complete) { $(this).load(); }
});

從簡單的$.load()函數（使用$.on('load') ）更改為$.one('load')函數可將事件限制為僅觸發一次。 if (this.complete)然后檢查事件是否已綁定到元素之前是否已經加載了它，如果已經綁定，它將觸發load事件 。

鏈接到解決方案

Answer 2

使用$（window）.load事件。 僅在加載所有圖像時才觸發

$(window).load(function(){
    $('.prefade').preFade(1000);
});