我使用JavaScript和jQuery库来操作包含在无序列表中的图像缩略图。当图像加载时，它做一件事，当错误发生时，它做另一件事。我使用jQuery load()和error()方法作为事件。在这些事件之后，我检查图像DOM元素中的.complete，以确保在jQuery注册这些事件之前图像还没有加载。
它可以正常工作，除非在jQuery注册事件之前发生错误。我能想到的唯一解决方案是使用img onerror属性存储一个“标志”全局(或在节点本身)，表示它失败了，这样jQuery就可以在检查.complete时检查“store/node”。
有人有更好的解决办法吗?
编辑:粗体的要点和添加额外的细节如下: 我正在检查图像是否完整(又名加载)后，我添加了一个加载和错误事件的图像。这样，如果图像是在事件注册之前加载的，我仍然会知道。如果图像在事件之后没有加载，那么当它加载时，事件会处理它。这样做的问题是，我可以很容易地检查图像是否已经加载，但我不能告诉是否发生了错误。
当前回答
这段代码帮助我修复了浏览器缓存问题:
$("#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();
});
其他回答
在完整加载图像和EventListener时，我遇到了很多问题。
不管我怎么试，结果都不可靠。
但后来我找到了解决办法。它在技术上不是一个很好的一个，但现在我从来没有失败的图像加载。
我做了什么:
document.getElementById(currentImgID).addEventListener("load", loadListener1);
document.getElementById(currentImgID).addEventListener("load", loadListener2);
function loadListener1()
{
// Load again
}
function loadListener2()
{
var btn = document.getElementById("addForm_WithImage"); btn.disabled = false;
alert("Image loaded");
}
而不是一次加载图像，我只是在第一次之后直接加载第二次，两者都运行在事件处理程序中。
我的头痛都好了!
顺便说一下: 你们这些来自stackoverflow的家伙已经帮了我上百次了。为此非常感谢!
按此顺序检查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;
}
我尝试了很多不同的方法，只有这个方法对我有效
//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/
这段代码帮助我修复了浏览器缓存问题:
$("#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();
});
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()
