我使用JavaScript和jQuery库来操作包含在无序列表中的图像缩略图。当图像加载时，它做一件事，当错误发生时，它做另一件事。我使用jQuery load()和error()方法作为事件。在这些事件之后，我检查图像DOM元素中的.complete，以确保在jQuery注册这些事件之前图像还没有加载。
它可以正常工作，除非在jQuery注册事件之前发生错误。我能想到的唯一解决方案是使用img onerror属性存储一个“标志”全局(或在节点本身)，表示它失败了，这样jQuery就可以在检查.complete时检查“store/node”。
有人有更好的解决办法吗?
编辑:粗体的要点和添加额外的细节如下: 我正在检查图像是否完整(又名加载)后，我添加了一个加载和错误事件的图像。这样，如果图像是在事件注册之前加载的，我仍然会知道。如果图像在事件之后没有加载，那么当它加载时，事件会处理它。这样做的问题是，我可以很容易地检查图像是否已经加载，但我不能告诉是否发生了错误。
当前回答
在阅读了本页上有趣的解决方案后，我创建了一个易于使用的解决方案，深受SLaks和Noyo的帖子的影响，似乎在Chrome、IE、Firefox、Safari和Opera(都在Windows上)的最新版本上都可以使用。此外，它还可以在我使用的iPhone/iPad模拟器上运行。
这个解决方案与SLaks和Noyo的帖子之间的一个主要区别是，这个解决方案主要检查naturalWidth和naturalHeight属性。我发现在当前的浏览器版本中，这两个属性似乎提供了最有帮助和最一致的结果。
这段代码在图像完全加载成功时返回TRUE。当图像尚未完全加载或加载失败时，它返回FALSE。
你需要注意的一件事是，如果图像是0x0像素的图像，这个函数也会返回FALSE。但这些图像是相当不常见的，我想不出一个非常有用的情况下，你会想要检查一个0x0像素的图像是否已经加载:)
首先，我们将一个名为“isLoaded”的新函数附加到HTMLImageElement原型，以便该函数可以用于任何图像元素。
HTMLImageElement.prototype.isLoaded = function() {
// See if "naturalWidth" and "naturalHeight" properties are available.
if (typeof this.naturalWidth == 'number' && typeof this.naturalHeight == 'number')
return !(this.naturalWidth == 0 && this.naturalHeight == 0);
// See if "complete" property is available.
else if (typeof this.complete == 'boolean')
return this.complete;
// Fallback behavior: return TRUE.
else
return true;
};
然后，任何时候我们需要检查图像的加载状态，我们只需调用“isLoaded”函数。
if (someImgElement.isLoaded()) {
// YAY! The image loaded
}
else {
// Image has not loaded yet
}
根据giorgian在SLaks和Noyo的帖子上的评论，如果你打算改变SRC属性，这个解决方案可能只能用于Safari Mobile上的一次性检查。但是您可以通过创建一个带有新的SRC属性的图像元素来解决这个问题，而不是在现有的图像元素上更改SRC属性。
其他回答
var isImgLoaded = function(imgSelector){
return $(imgSelector).prop("complete") && $(imgSelector).prop("naturalWidth") !== 0;
}
//或作为一个插件
$.fn.extend({
isLoaded: function(){
return this.prop("complete") && this.prop("naturalWidth") !== 0;
}
})
// $(".myImage").isLoaded()
这个对我来说很好:)
$('.progress-image').each(function(){
var img = new Image();
img.onload = function() {
let imgSrc = $(this).attr('src');
$('.progress-image').each(function(){
if($(this).attr('src') == imgSrc){
console.log($(this).parent().closest('.real-pack').parent().find('.shimmer').fadeOut())
}
})
}
img.src = $(this).attr('src');
});
使用此JavaScript代码，您可以检查图像是否成功加载。
document.onready = function(e) {
var imageobj = new Image();
imageobj.src = document.getElementById('img-id').src;
if(!imageobj.complete){
alert(imageobj.src+" - Not Found");
}
}
试试这个
按此顺序检查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;
}
在阅读了本页上有趣的解决方案后，我创建了一个易于使用的解决方案，深受SLaks和Noyo的帖子的影响，似乎在Chrome、IE、Firefox、Safari和Opera(都在Windows上)的最新版本上都可以使用。此外，它还可以在我使用的iPhone/iPad模拟器上运行。
这个解决方案与SLaks和Noyo的帖子之间的一个主要区别是，这个解决方案主要检查naturalWidth和naturalHeight属性。我发现在当前的浏览器版本中，这两个属性似乎提供了最有帮助和最一致的结果。
这段代码在图像完全加载成功时返回TRUE。当图像尚未完全加载或加载失败时，它返回FALSE。
你需要注意的一件事是，如果图像是0x0像素的图像，这个函数也会返回FALSE。但这些图像是相当不常见的，我想不出一个非常有用的情况下，你会想要检查一个0x0像素的图像是否已经加载:)
首先，我们将一个名为“isLoaded”的新函数附加到HTMLImageElement原型，以便该函数可以用于任何图像元素。
HTMLImageElement.prototype.isLoaded = function() {
// See if "naturalWidth" and "naturalHeight" properties are available.
if (typeof this.naturalWidth == 'number' && typeof this.naturalHeight == 'number')
return !(this.naturalWidth == 0 && this.naturalHeight == 0);
// See if "complete" property is available.
else if (typeof this.complete == 'boolean')
return this.complete;
// Fallback behavior: return TRUE.
else
return true;
};
然后，任何时候我们需要检查图像的加载状态，我们只需调用“isLoaded”函数。
if (someImgElement.isLoaded()) {
// YAY! The image loaded
}
else {
// Image has not loaded yet
}
根据giorgian在SLaks和Noyo的帖子上的评论，如果你打算改变SRC属性，这个解决方案可能只能用于Safari Mobile上的一次性检查。但是您可以通过创建一个带有新的SRC属性的图像元素来解决这个问题，而不是在现有的图像元素上更改SRC属性。
