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:block; 来自display:none; 图像出现.

我有一个想法可能是我所缺少的事件被称为事件的顺序......

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)然后在事件被绑定到元素之前检查它是否已被加载,如果有,则会触发加载事件.

链接到解决方案