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

More efficient way to wait for all images to load in jQuery

本文关键字：加载 有效 方法 图像 jQuery 等待      更新时间：2023-09-26

我混合使用.ready()和.load()来执行我想要的函数。

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

正如您所看到的，这将等待DOM准备就绪，然后在每次<img>加载时，它都会执行代码。

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

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

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

您可以这样做以避免函数多次运行。

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

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

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

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

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

那是因为

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

不是一个jQuery对象，正如这个问题中提到的：

在（window）.load上调用jQuery并传递"无冲突"代码的变量

相关文章：