jQuery.load(）;并不总是用图像触发

jQuery.load(); not always firing with images

本文关键字：图像 load jQuery      更新时间：2023-09-26

我有一个脚本，它在加载图像时会在图像中淡入淡出，以防止丑陋的加载动画，它使用 $(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;图像就会出现。

我有一个暗示，也许我在调用事件的顺序上缺少一些东西......

我在注释中链接到一个解决方案，这就是它适合我的代码的方式。

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

从简单$.load()函数（使用 $.on('load') ）更改为 $.one('load') 函数会将事件限制为仅触发一次。 然后，if (this.complete)检查它是否在事件绑定到元素之前就已加载，如果有，它将触发 load 事件。

链接到解决方案

使用 $（window）.load 事件。仅当加载所有图像时，才会进行三重处理

$(window).load(function(){
    $('.prefade').preFade(1000);
});
相关文章：