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

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
        }
    });
});