在IE中，你可以onreadystatechange。有加载，但我读到可怕的东西。jQuery 用“就绪”很好地包装了 DOM 的加载事件。似乎我只是不知道另一个不错的库的图像加载实现。
上下文是我正在动态生成图像（通过服务器回调），这可能需要一些时间下载。在我的 IE-only 代码中，我设置了 img 元素的 src，然后当 onreadystatechange 事件以“完成”状态触发时，我将它添加到 DOM 以便用户看到它。
我对“本机”JavaScript 解决方案或指向执行此工作的库的指针感到满意。那里有很多图书馆，我确定这是我不知道正确的图书馆的一个例子。也就是说，我们已经是 jQuery 用户，所以我并不急于添加一个非常大的库来获得这个功能。
注意：我是在 2010 年写的，当时的浏览器是 IE 8/9 beta、Firefox 3.x 和 Chrome 4.x。请仅将其用于研究目的，我怀疑您是否可以将其复制/粘贴到现代浏览器中并使其正常工作。
警告：现在是 2017 年，我仍然时不时地在这方面获得积分，请仅将其用于研究目的。我目前不知道如何检测图像加载状态，但可能有比这更优雅的方法……至少我非常希望有。我强烈建议不要在没有更多研究的情况下在生产环境中使用我的代码。
警告第二部分 Electric Boogaloo：现在是 2019 年，现在大多数 jQuery 功能都内置到 vanilla JS 中。如果您仍在使用它，可能是时候停下来考虑转到MDN并阅读 vanilla JS 必须提供的一些新的和有趣的东西。
我参加这个聚会有点晚了，也许这个答案会帮助别人......
如果您正在使用 jQuery，请不要理会股票事件处理程序（onclick/onmouseover/等），实际上只是完全停止使用它们。使用他们在API 中提供的事件方法。
这将在图像附加到正文之前发出警报，因为当图像加载到内存中时会触发 load 事件。它完全按照您的要求执行：使用 test.jpg 的 src 创建一个图像，当 test.jpg 加载时发出警报，然后将其附加到正文。
var img = $('<img src="test.jpg" />');
img.load(function() {
alert('Image Loaded');
});
$('body').append(img);
这将提醒，在图像插入正文后，再次执行您告诉它的操作：创建图像，设置事件（未设置 src，因此尚未加载），将图像附加到正文（仍然没有 src），现在设置 src... 现在图像已加载，因此事件被触发。
var img = $('<img />');
img.load(function() {
alert('Image Loaded');
});
$('body').append(img);
$img.attr('src','test.jpg');
您当然也可以添加错误处理程序并使用 bind() 合并一堆事件。
var img = $('<img />');
img.bind({
load: function() {
alert('Image loaded.');
},
error: function() {
alert('Error thrown, image didn\'t load, probably a 404.');
}
});
$('body').append(img);
img.attr('src','test.jpg');
根据@ChrisKempen 的请求...
这是在加载 DOM 后确定图像是否损坏的非事件驱动方式。这段代码是StereoChrome一篇文章的衍生代码，它使用自然宽度、自然高度和完整属性来确定图像是否存在。
$('img').each(function() {
if (this.naturalWidth === 0 || this.naturalHeight === 0 || this.complete === false) {
alert('broken image');
}
});
根据 W3C 规范，只有BODY 和 FRAMESET 元素提供要附加到的“onload”事件。一些浏览器无论如何都支持它，但请注意它不需要实现 W3C 规范。
可能与本次讨论有关的内容，尽管不一定是您需要的答案，是本次讨论：
其他可能与您的需求相关的东西，虽然它可能不是，是关于支持任何动态加载的DOM 元素的合成“onload”事件的信息：
我发现的唯一可靠的方法是像这样在客户端完成所有操作......
var img = new Image();
img.onload = function() {
alert('Done!');
}
img.src = '/images/myImage.jpg';
我认为onload应该工作正常。您必须为图像生成标记，还是可以静态添加它们？如果是后者，我建议如下：
<img src="foo.png" class="classNeededToHideImage" onload="makeVisible(this)">
或者，您可以使用window.onload使所有图像一次可见 -window.onload在所有外部资源加载完成后触发。
如果你想动态添加图像，你首先必须等待 DOM 准备好被修改，即使用 jQuery 或为不支持它的浏览器实现你自己的 DOMContentLoaded hack。
然后，您创建图像对象，分配onload侦听器以使其可见和/或将它们添加到文档中。
更好（但稍微复杂一点）是在脚本执行时立即创建并开始加载图像。在 DOMContentLoaded 上，您必须检查每个图像complete以决定是立即将它们添加到文档中还是等待图像的onload侦听器触发。
好的，我将尝试在这里总结各种部分答案（包括我的）。
答案似乎是使用 onload，虽然根据标准没有正式要求，但它“受到广泛支持”。请注意，特别是对于 IE，您必须在设置 src 属性之前设置 onLoad，否则在从缓存加载图像时它可能不会触发 onload。在任何情况下，这似乎都是最佳实践：在开始触发事件之前设置事件处理程序。在不支持 onload 的情况下，应该假设该功能根本不可用。