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

Question

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

但有时，当外部脚本或其他东西需要很长时间才能加载时，即使图像已加载，我的功能也会很晚才会启动。

所以我想找到一个像$(document).ready(function()这样的功能，等待直到所有加载的图像，然后运行我的功能。 我不需要整个文档准备就绪，我只需要为我的函数加载图像。

有没有这样的事情？

Answer 1

是的，这其实很简单。图像元素上有一个complete标志，并且它们在完成时触发load或error事件。因此，我们可以做到这一点（请参阅下面的备注明显的复杂）：

，每当你需要检查使用这样的：

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

你可以在脚本中使用它，你已放在身体的尽头，就在关闭</body>标记之前（或者如果您愿意，可以在ready回拨中）。

您可能想知道“完整”图像的复杂性。为什么我们在他们身上挂上一个事件，然后将其移除并解除事件？这是为了处理竞争条件。尽管浏览器在单个UI线程上运行主JavaScript，但浏览器是而不是单线程。它可以随时完成加载图像并设置其属性complete。如果我们尚未与该图片上的load/error事件挂钩，那么我们将不会收到通知。因此，如果我们先筛选出完整的图像，然后将事件挂钩到其余的图像上，那么在代码（再次说明：我们的代码是单线程，浏览器不是）的代码行之间完成的任何图像都不会触发事件。所以我们勾选事件，然后过滤出完成的事件，然后处理我们回来的任何事件。