如何使用 JavaScript 或 jQuery 检测图像何时完成加载，无论是来自服务器还是浏览器缓存？
我想在同一个<img/> 标签中加载各种图像，并检测新图像的加载何时完成。
【问题讨论】：
标签： javascript jquery image
$('img').on('load', function() {
// do whatever you want
});
【讨论】：
onload 文档的事件仅在所有元素（包括图像）完全加载后才会触发。
onload 的事件将在单个图像完全加载后触发。
因此，您可以使用 jQuery 对象或 DOM 的 addEventListener（和 IE 的 attachEvent）为这些事件附加监听器
【讨论】：
如需更彻底的图像加载检测，包括从缓存加载的图像，请尝试以下操作：https://github.com/paulirish/jquery.imgloaded
【讨论】：
嗯，这是我昨天遇到的一个很老的话题。我正在使用backbone.js 和require.js 并且调整我的布局大小总是会导致包含图像的视图出现问题。
所以，我需要一种方法来了解最后一张图片何时完成加载以调整布局大小。所有，上面提到的解决方案在我的情况下都不起作用。经过几个小时的调查，我找到了行之有效的最终解决方案：
http://desandro.github.com/imagesloaded/
希望对其他人也有帮助。
【讨论】：
来自一个非常相似的问题Official way to ask jQuery wait for all images to load before executing something，就像 Pikrass 所说：
使用 jQuery，您可以使用
$(document).ready()在加载 DOM 时执行某些操作，并使用$(window).load()在加载所有其他内容（例如图像）时执行某些操作。
这里有两个例子：
##DOM
jQuery(document).ready(function(){
console.log('DOM ready');
});
##Images / 其他所有内容
jQuery(window).load(function(){
console.log('all other things ready');
});
您应该可以在控制台中确认：
【讨论】：
我觉得这看起来有点干净
$('img').load(function() {
// Your img has finished loading!
});
【讨论】：
每个人都提到应该在设置到 src 之前触发事件。
但如果您不想担心，您可以使用oncomplete 事件（即使缓存图像也会触发）触发onload，如下所示：
$("img").one("load", function() {
// do stuff
}).each(function() {
if(this.complete) $(this).load();
});
使用 jQuery 你不必担心向后兼容性问题（例如：IE 中的img.height>0）
【讨论】：