Question

我正在混合使用.ready()和.load()来执行我想要的功能。

jQuery(document).ready(function($) {
    $("img").load(function() {
        // Function goes here
    });
});

如您所见，这等待DOM准备好，然后在每个<img>加载时，它执行代码。

如果我只有一个图像要加载，这将很简单。

但问题是 - 如果我要加载 10张图片怎么办？由于每个图像逐个加载，该函数将被称为 10次，并且这不是一种非常有效的方法，只是为了达到我想要的目的。

所以这就是问题 - 是否有一种更有效的方式等待所有图像加载，然后执行一次？

Answer 1

你可以这样做，以避免你的功能多次运行。

jQuery(document).ready(function($) {
    var nrOfImages = $("img").length;
    $("img").load(function() {
        if(--nrOfImages == 0)
        {
            // Function goes here
        }
    });
});

Answer 2

jQuery(window).load(function() {
    alert("page finished loading now.");
});

加载页面上的所有内容后，将触发

jQuery(window).load(...)。这与加载DOM后触发的jQuery(document).load(...)不同。我认为这将解决您的问题。

Answer 3

如果有人想知道，我的最终结果是：

(function($) {
    $(window).load(function(){
        // Function goes here
    });
})(jQuery);

因为

jQuery(window).load(function($) {});

不是jQuery对象，如本问题所述：

Calling jQuery on (window).load and passing variable for 'No Conflict' code

更有效的方法来等待所有图像加载在jQuery中

3 个答案: