我使用JavaScript和jQuery库来操作包含在无序列表中的图像缩略图。当图像加载时，它做一件事，当错误发生时，它做另一件事。我使用jQuery load()和error()方法作为事件。在这些事件之后，我检查图像DOM元素中的.complete，以确保在jQuery注册这些事件之前图像还没有加载。
它可以正常工作，除非在jQuery注册事件之前发生错误。我能想到的唯一解决方案是使用img onerror属性存储一个“标志”全局(或在节点本身)，表示它失败了，这样jQuery就可以在检查.complete时检查“store/node”。
有人有更好的解决办法吗?
编辑:粗体的要点和添加额外的细节如下: 我正在检查图像是否完整(又名加载)后，我添加了一个加载和错误事件的图像。这样，如果图像是在事件注册之前加载的，我仍然会知道。如果图像在事件之后没有加载，那么当它加载时，事件会处理它。这样做的问题是，我可以很容易地检查图像是否已经加载，但我不能告诉是否发生了错误。
当前回答
这是我如何让它跨浏览器使用上述方法的组合(我还需要动态插入图像到dom):
$('#domTarget').html('<img src="" />');
var url = '/some/image/path.png';
$('#domTarget img').load(function(){}).attr('src', url).error(function() {
if ( isIE ) {
var thisImg = this;
setTimeout(function() {
if ( ! thisImg.complete ) {
$(thisImg).attr('src', '/web/css/img/picture-broken-url.png');
}
},250);
} else {
$(this).attr('src', '/web/css/img/picture-broken-url.png');
}
});
注意:您需要为isIE变量提供一个有效的布尔状态。
其他回答
按此顺序检查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;
}
使用此JavaScript代码，您可以检查图像是否成功加载。
document.onready = function(e) {
var imageobj = new Image();
imageobj.src = document.getElementById('img-id').src;
if(!imageobj.complete){
alert(imageobj.src+" - Not Found");
}
}
试试这个
在阅读了本页上有趣的解决方案后，我创建了一个易于使用的解决方案，深受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属性。
使用imagesLoaded javascript库。
可用的纯Javascript和作为jQuery插件。
特点:
IE8+正式支持 许可协议:麻省理工学院 依赖性:没有 重量(缩小&压缩):7kb缩小(轻!)
资源
项目在github: https://github.com/desandro/imagesloaded 官方网站:http://imagesloaded.desandro.com/ https://stackoverflow.com/questions/26927575/why-use-imagesloaded-javascript-library-versus-jquerys-window-load Imagesloaded javascript库:浏览器和设备支持什么?
这段代码帮助我修复了浏览器缓存问题:
$("#my_image").on('load', function() {
console.log("image loaded correctly");
}).each(function() {
if($(this).prop('complete')) $(this).load();
});
当浏览器缓存被禁用时，只有以下代码不起作用:
$("#my_image").on('load', function() {
console.log("image loaded correctly");
})
为了让它工作，你必须添加:
.each(function() {
if($(this).prop('complete')) $(this).load();
});
