使用此JavaScript代码，您可以检查图像是否成功加载。

document.onready = function(e) {
        var imageobj = new Image();
        imageobj.src = document.getElementById('img-id').src;
        if(!imageobj.complete){ 
            alert(imageobj.src+"  -  Not Found");
        }
}

试试这个

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() 

实时网络检测器-检查网络状态，无需刷新页面: (它不是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>

基于我对img元素的W3C HTML规范的理解，你应该能够使用complete和naturalHeight属性的组合来做到这一点，就像这样:

function imgLoaded(imgElement) {
  return imgElement.complete && imgElement.naturalHeight !== 0;
}

complete属性的规范:

IDL属性complete如果出现下列情况之一，则必须返回true 条件为真: src属性省略。 获取资源后由网络任务源排队的最后一个任务已经排队。 img元素是完全可用的。 img元素被破坏了。 否则，该属性必须返回false。

本质上，complete返回true如果图像已经完成加载，或者加载失败。因为我们只想要图像成功加载的情况，我们需要检查nauturalHeight属性:

IDL属性naturalWidth和naturalHeight必须返回 图像的固有宽度和高度，以CSS像素为单位，如果图像 可用，否则为0。

available的定义如下:

An img is always in one of the following states: Unavailable - The user agent hasn't obtained any image data. Partially available - The user agent has obtained some of the image data. Completely available - The user agent has obtained all of the image data and at least the image dimensions are available. Broken - The user agent has obtained all of the image data that it can, but it cannot even decode the image enough to get the image dimensions (e.g. the image is corrupted, or the format is not supported, or no data could be obtained). When an img element is either in the partially available state or in the completely available state, it is said to be available.

因此，如果图像是“破碎的”(加载失败)，那么它将处于破碎状态，而不是可用状态，因此naturalHeight将为0。

因此，检查imgElement.complete && imgElement。== 0应该告诉我们图像是否已经成功加载。

您可以在img元素的W3C HTML规范或MDN上阅读更多相关内容。

按此顺序检查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;
}

据我所知，.complete属性是非标准的。这可能不是普遍的……我注意到它在Firefox和IE中的工作方式似乎有所不同。我在javascript中加载了一些图像，然后检查是否完整。在Firefox中，这似乎工作得很好。在IE中，它不会，因为图像看起来是加载在另一个线程上。只有当我对图像的赋值之间有延迟时，它才会起作用。src，检查image。complete属性。

使用图像。Onload和image。onerror也不适合我，因为我需要传递一个参数，以便在调用函数时知道我谈论的是哪个图像。任何这样做的方式似乎都失败了，因为它实际上传递的是同一个函数，而不是同一个函数的不同实例。所以我传递给它用来识别图像的值总是循环中的最后一个值。我想不出任何办法来解决这个问题。

在Safari和Chrome上，我看到image.complete true和naturalWidth设置，即使错误控制台显示该图像的404…我特意删除了那张图片来测试一下。但是上面的方法在Firefox和IE上都很有效。