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

另一种方法是通过创建内存中的图像元素并将其src属性设置为原始图像的原始src属性来触发onload和/或onerror事件。下面是我想说的一个例子:

$("<img/>")
    .on('load', function() { console.log("image loaded correctly"); })
    .on('error', function() { console.log("error loading image"); })
    .attr("src", $(originalImage).attr("src"))
;

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

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

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

这是我如何让它跨浏览器使用上述方法的组合(我还需要动态插入图像到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变量提供一个有效的布尔状态。

我尝试了很多不同的方法，只有这个方法对我有效

//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/

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

使用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库:浏览器和设备支持什么?

在阅读了本页上有趣的解决方案后，我创建了一个易于使用的解决方案，深受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属性。

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

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

试试这个

基于我对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上阅读更多相关内容。

从页面上的图像元素检索信息 在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

我在这里找到了很好的信息——>，这是一个法语论坛

在完整加载图像和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的家伙已经帮了我上百次了。为此非常感谢!

这段代码帮助我修复了浏览器缓存问题:

$("#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() 

这个对我来说很好:)

$('.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');
});