我使用 JavaScript 和 jQuery 库来操作包含在无序列表中的图像缩略图。加载图像时它会做一件事，当发生错误时它会做其他事情。我使用 jQueryload()和error()方法作为事件。在这些事件之后，我检查了 .complete 的图像 DOM 元素，以确保图像在 jQuery 注册事件之前尚未加载。
它可以正常工作，除非在 jQuery 注册事件之前发生错误。我能想到的唯一解决方案是使用 imgonerror属性在全局某处（或在它自己的节点上）存储一个“标志”，表明它失败了，这样 jQuery 就可以在检查 .complete 时检查“存储/节点”。
有人有更好的解决方案吗？
编辑：粗体要点并在下面添加了额外的细节：在 我在图像上添加加载和错误事件后，我正在检查图像是否完整（也称为加载）。这样，如果图像是在注册事件之前加载的，我仍然会知道。如果图像未在事件之后加载，则事件将在加载时处理它。问题是，我可以轻松检查图像是否已加载，但我无法判断是否发生了错误。
另一种选择是通过创建内存图像元素并将其属性设置为原始图像的原始属性来触发onload和/或onerror事件。这是我的意思的一个例子：srcsrc
$("<img/>")
.on('load', function() { console.log("image loaded correctly"); })
.on('error', function() { console.log("error loading image"); })
.attr("src", $(originalImage).attr("src"))
;
希望这可以帮助！
按此顺序检查complete和naturalWidth属性。
https://stereochro.me/ideas/detecting-broken-images-js
function IsImageOk(img) {
// During the onload event, IE correctly identifies any images that
// weren’t downloaded as not complete. Others should too. Gecko-based
// browsers act like NS4 in that they report this incorrectly.
if (!img.complete) {
return false;
}
// However, they do have two very useful properties: naturalWidth and
// naturalHeight. These give the true size of the image. If it failed
// to load, either of these should be zero.
if (img.naturalWidth === 0) {
return false;
}
// No other way of checking: assume it’s ok.
return true;
}
根据我对element的 W3C HTML 规范的img理解，您应该能够使用complete和naturalHeight属性的组合来做到这一点，如下所示：
function imgLoaded(imgElement) {
return imgElement.complete && imgElement.naturalHeight !== 0;
}
从complete属性的规范：
如果以下任一条件为真，IDL 属性 complete 必须返回真：
- src 属性被省略。
- 获取资源后，网络任务源排队的最后一个任务已排队。
- img 元素完全可用。
- img 元素损坏。
否则，该属性必须返回 false。
所以本质上，complete如果图像已完成加载或加载失败，则返回 true。由于我们只需要图像成功加载的情况，因此我们还需要检查nauturalHeight属性：
IDL 属性
naturalWidth和naturalHeight必须返回图像的固有宽度和高度，以 CSS 像素为单位，如果图像可用，否则为 0。
并且available定义如下：
img 始终处于以下状态之一：
- 不可用- 用户代理尚未获得任何图像数据。
- 部分可用- 用户代理已获得一些图像数据。
- 完全可用- 用户代理已获取所有图像数据，并且至少图像尺寸可用。
- Broken - 用户代理已经获取了它所能获取的所有图像数据，但它甚至无法对图像进行足够的解码以获取图像尺寸（例如，图像已损坏，或格式不受支持，或无法获取数据） .
当一个 img 元素处于部分可用状态或完全可用状态时，称为可用。
因此，如果图像“损坏”（加载失败），那么它将处于损坏状态，而不是可用状态，因此naturalHeight将为 0。
因此，检查imgElement.complete && imgElement.naturalHeight !== 0应该告诉我们图像是否已成功加载。
您可以在该img元素的 W3C HTML 规范或MDN 上阅读有关此内容的更多信息。
我尝试了很多不同的方法，这种方法是唯一对我有用的方法
//check all images on the page
$('img').each(function(){
var img = new Image();
img.onload = function() {
console.log($(this).attr('src') + ' - done!');
}
img.src = $(this).attr('src');
});
您还可以添加一个回调函数，在所有图像都加载到 DOM 中并准备就绪后触发。这也适用于动态添加的图像。http://jsfiddle.net/kalmarsh80/nrAPk/