加载所有图像后的jQuery或javascript函数

Question

当前我正在使用$( window ).load(function()在加载所有图像后触发动作。

但是有时候，当外部脚本或其他内容需要很长时间加载时，即使已加载图像，我的函数也会启动得很晚。

所以我想找到一个像$( document ).ready(function() ，它会等到所有图像加载完毕后再运行我的函数，我不需要准备整个文档，我只需要为这些图像加载我的功能。

有没有这样的东西？

Answer 1

是的，这实际上很容易做到。 图像元素上具有complete标志，并且它们在完成时会触发load或error事件。 因此，我们可以执行此操作（请参阅以下有关明显复杂性的注释） ：

function getAllImagesDonePromise() {
    // A jQuery-style promise we'll resolve
    var d = $.Deferred();

    // Get all images to start with (even complete ones)
    var imgs = $("img");

    // Add a one-time event handler for the load and error events on them
    imgs.one("load.allimages error.allimages", function() {
        // This one completed, remove it
        imgs = imgs.not(this);
        if (imgs.length == 0) {
            // It was the last, resolve
            d.resolve();
        }
    });

    // Find the completed ones
    var complete = imgs.filter(function() { return this.complete; });

    // Remove our handler from completed ones, remove them from our list
    complete.off(".allimages");
    imgs = imgs.not(complete);
    complete = undefined; // Don't need it anymore

    // If none left, resolve; otherwise wait for events
    if (imgs.length == 0) {
        d.resolve();
    }

    // Return the promise for our deferred
    return d.promise();
}

并在需要检查时像这样使用它：

getAllImagesDonePromise().then(function() {
    // They're all done
});

您可以在放在正文末尾</body>标记之前的脚本中使用它（或者，如果愿意， ready在ready回调中使用它）。

您可能想知道“完整”图像的复杂性。 我们为什么要在其上挂一个事件，然后将其删除并取消挂起事件？ 这是为了应对比赛条件。 尽管浏览器在单个UI线程上运行主要的JavaScript，但浏览器 不是单线程的。 它可以随时完成图像加载并设置其complete属性。 如果发生这种情况时我们还没有迷上该图像上的load / error事件，则不会收到通知。 因此，如果我们先过滤掉完成的图像，然后将事件挂在其余的图像上，那么在这些代码行之间完成的任何图像（同样：我们的代码是单线程的，浏览器不是）将永远不会触发该事件。 因此，我们挂接事件， 然后过滤掉已完成的事件，然后处理返回的所有事件。