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') function将事件限制为仅触发一次。 if (this.complete)然后在事件被绑定到元素之前检查它是否已被加载，如果有，则会触发加载事件。

Link to solution

Answer 2

使用$（window）.load事件。只有在加载所有图像时才会触发此操作

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

jQuery.load（）;并不总是用图像激发

2 个答案: