javascript - 在执行之前检查是否加载了子元素(图像)？

Question

我有一个包含许多图像的 div。我想在执行某些代码之前检查是否已加载此 div 中的所有图像。我无法处理整个文档，因为页面上还有其他内容可能需要更长时间才能加载。

我该怎么做？ jquery 可供使用。

Answer 1

你应该起诉 load event

$('img').load(function(){
   //here do what you need to do when the img is loaded
});

注意事项

Caveats of the load event when used with images

A common challenge developers attempt to solve using the .load() shortcut is to execute a function when an image (or collection of images) have completely loaded. There are several known caveats with this that should be noted. These are:

• It doesn't work consistently nor reliably cross-browser
• It doesn't fire correctly in WebKit if the image src is set to the same src as before
• It doesn't correctly bubble up the DOM tree
• Can cease to fire for images that already live in the browser's cache