这个对我来说很好:)

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

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

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

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

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

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

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

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