javascript - jQuery.load();并不总是用图像射击

Question

我有一个脚本在加载图片时淡入淡出以防止丑陋的加载动画，它使用$(elem).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: none; 更改为 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) 然后在事件绑定(bind)到元素之前检查它是否已经加载，如果是，它将触发加载事件。

Link to solution