我使用JavaScript和jQuery库来操作包含在无序列表中的图像缩略图。当图像加载时，它做一件事，当错误发生时，它做另一件事。我使用jQuery load()和error()方法作为事件。在这些事件之后，我检查图像DOM元素中的.complete，以确保在jQuery注册这些事件之前图像还没有加载。
它可以正常工作，除非在jQuery注册事件之前发生错误。我能想到的唯一解决方案是使用img onerror属性存储一个“标志”全局(或在节点本身)，表示它失败了，这样jQuery就可以在检查.complete时检查“store/node”。
有人有更好的解决办法吗?
编辑:粗体的要点和添加额外的细节如下: 我正在检查图像是否完整(又名加载)后，我添加了一个加载和错误事件的图像。这样，如果图像是在事件注册之前加载的，我仍然会知道。如果图像在事件之后没有加载，那么当它加载时，事件会处理它。这样做的问题是，我可以很容易地检查图像是否已经加载，但我不能告诉是否发生了错误。
当前回答
据我所知，.complete属性是非标准的。这可能不是普遍的……我注意到它在Firefox和IE中的工作方式似乎有所不同。我在javascript中加载了一些图像，然后检查是否完整。在Firefox中，这似乎工作得很好。在IE中，它不会，因为图像看起来是加载在另一个线程上。只有当我对图像的赋值之间有延迟时，它才会起作用。src，检查image。complete属性。
使用图像。Onload和image。onerror也不适合我，因为我需要传递一个参数，以便在调用函数时知道我谈论的是哪个图像。任何这样做的方式似乎都失败了，因为它实际上传递的是同一个函数，而不是同一个函数的不同实例。所以我传递给它用来识别图像的值总是循环中的最后一个值。我想不出任何办法来解决这个问题。
在Safari和Chrome上，我看到image.complete true和naturalWidth设置，即使错误控制台显示该图像的404…我特意删除了那张图片来测试一下。但是上面的方法在Firefox和IE上都很有效。
其他回答
实时网络检测器-检查网络状态，无需刷新页面: (它不是jquery，但经过测试，100%工作:(在Firefox v25.0上测试))
代码:
<script>
function ImgLoad(myobj){
var randomNum = Math.round(Math.random() * 10000);
var oImg=new Image;
oImg.src="YOUR_IMAGELINK"+"?rand="+randomNum;
oImg.onload=function(){alert('Image succesfully loaded!')}
oImg.onerror=function(){alert('No network connection or image is not available.')}
}
window.onload=ImgLoad();
</script>
<button id="reloadbtn" onclick="ImgLoad();">Again!</button>
如果连接断开，请按“再次”按钮。
更新1: 自动检测，无需刷新页面:
<script>
function ImgLoad(myobj){
var randomNum = Math.round(Math.random() * 10000);
var oImg=new Image;
oImg.src="YOUR_IMAGELINK"+"?rand="+randomNum;
oImg.onload=function(){networkstatus_div.innerHTML="";}
oImg.onerror=function(){networkstatus_div.innerHTML="Service is not available. Please check your Internet connection!";}
}
networkchecker = window.setInterval(function(){window.onload=ImgLoad()},1000);
</script>
<div id="networkstatus_div"></div>
这个对我来说很好:)
$('.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');
});
据我所知，.complete属性是非标准的。这可能不是普遍的……我注意到它在Firefox和IE中的工作方式似乎有所不同。我在javascript中加载了一些图像，然后检查是否完整。在Firefox中，这似乎工作得很好。在IE中，它不会，因为图像看起来是加载在另一个线程上。只有当我对图像的赋值之间有延迟时，它才会起作用。src，检查image。complete属性。
使用图像。Onload和image。onerror也不适合我，因为我需要传递一个参数，以便在调用函数时知道我谈论的是哪个图像。任何这样做的方式似乎都失败了，因为它实际上传递的是同一个函数，而不是同一个函数的不同实例。所以我传递给它用来识别图像的值总是循环中的最后一个值。我想不出任何办法来解决这个问题。
在Safari和Chrome上，我看到image.complete true和naturalWidth设置，即使错误控制台显示该图像的404…我特意删除了那张图片来测试一下。但是上面的方法在Firefox和IE上都很有效。
从页面上的图像元素检索信息 在Chrome和Firefox上测试工作 使用jsFiddle(打开控制台查看结果)
$('img').each(function(){ // selecting all image element on the page
var img = new Image($(this)); // creating image element
img.onload = function() { // trigger if the image was loaded
console.log($(this).attr('src') + ' - done!');
}
img.onerror = function() { // trigger if the image wasn't loaded
console.log($(this).attr('src') + ' - error!');
}
img.onAbort = function() { // trigger if the image load was abort
console.log($(this).attr('src') + ' - abort!');
}
img.src = $(this).attr('src'); // pass src to image object
// log image attributes
console.log(img.src);
console.log(img.width);
console.log(img.height);
console.log(img.complete);
});
注意:我使用jQuery，我认为这可以实现在完整的javascript
我在这里找到了很好的信息——>，这是一个法语论坛
使用此JavaScript代码，您可以检查图像是否成功加载。
document.onready = function(e) {
var imageobj = new Image();
imageobj.src = document.getElementById('img-id').src;
if(!imageobj.complete){
alert(imageobj.src+" - Not Found");
}
}
试试这个
