3

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

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

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

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

但问题是——如果我要加载10 张图像怎么办？由于每个图像一个一个地加载，该函数将被调用10 次，这不是一种非常有效的方法来实现我想要的。

那么问题来了——有没有更有效的方法来等待所有图像加载，然后执行一次函数？

4

3 回答 3

4

你可以做这样的事情来避免你的函数运行多次。

jQuery(document).ready(function($) {
    var nrOfImages = $("img").length;
    $("img").load(function() {
        if(--nrOfImages == 0)
        {
            // Function goes here
        }
    });
});
于 2013-08-13T19:29:57.813 回答
1 
jQuery(window).load(function() {
    alert("page finished loading now.");
});

jQuery(window).load(...)将在页面上的所有内容加载完毕后触发。这与jQuery(document).load(...)加载 DOM 后触发的不同。我认为这将解决您的问题。

于 2013-08-13T19:32:18.357 回答
0

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

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

那是因为

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

不是 jQuery 对象，正如这个问题中所引用的：

在 (window).load 上调用 jQuery 并为“无冲突”代码传递变量

于 2013-08-13T19:48:03.643 回答