我使用JavaScript和jQuery库来操作包含在无序列表中的图像缩略图。当图像加载时,它做一件事,当错误发生时,它做另一件事。我使用jQuery load()和error()方法作为事件。在这些事件之后,我检查图像DOM元素中的.complete,以确保在jQuery注册这些事件之前图像还没有加载。
它可以正常工作,除非在jQuery注册事件之前发生错误。我能想到的唯一解决方案是使用img onerror属性存储一个“标志”全局(或在节点本身),表示它失败了,这样jQuery就可以在检查.complete时检查“store/node”。
有人有更好的解决办法吗?
编辑:粗体的要点和添加额外的细节如下:
我正在检查图像是否完整(又名加载)后,我添加了一个加载和错误事件的图像。这样,如果图像是在事件注册之前加载的,我仍然会知道。如果图像在事件之后没有加载,那么当它加载时,事件会处理它。这样做的问题是,我可以很容易地检查图像是否已经加载,但我不能告诉是否发生了错误。
在阅读了本页上有趣的解决方案后,我创建了一个易于使用的解决方案,深受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属性。
按此顺序检查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;
}
使用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库:浏览器和设备支持什么?
实时网络检测器-检查网络状态,无需刷新页面:
(它不是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>