我使用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();
});

其他回答

另一种方法是通过创建内存中的图像元素并将其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"))
;

实时网络检测器-检查网络状态,无需刷新页面: (它不是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库:浏览器和设备支持什么?

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

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

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

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