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

Question

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

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

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

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

但问题是 - 如果我有10张图片要加载怎么办？由于每张图片逐一加载，该函数将被调用10次，这不是实现我想要的目标的一种非常有效的方式。

因此，这里的问题是 - 是否有一种更有效的方法来等待所有图像加载完成，然后执行一次该函数？

- Kyle Yeo

---

可能是重复的问题 https://dev59.com/_XRB5IYBdhLWcg3wtJGF - asymptoticFault

转换：官方方法询问jQuery在执行某些操作之前等待所有图像加载完成的方式（请参见第二个答案） - Izkata

@asymptoticFault，我是要求执行一次，而不是像https://dev59.com/_XRB5IYBdhLWcg3wtJGF那样只是在加载时多次执行。 - Kyle Yeo

@Izkata 我会看一下第二个答案，看看是否是我需要的，谢谢。 - Kyle Yeo

链接的答案只有在所有图片加载完成后才会执行一次。 - asymptoticFault

Answer 1

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

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

- Tjofras

Answer 2

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

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

- Deepak Biswal

Answer 3

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

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

那是因为

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

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

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

- Kyle Yeo