版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010271602/article/details/78248057
图片是如今web 中不可或缺的元素,在开发中有时候需要知道图片的加载情况,如图片何时加载完成、图片是否加载成功等
1. 检测图片加载失败的处理(使用jquery提供的方法):
$(".img-responsive").bind("error", function () {
this.src = "../html-metro/images/nopicture.jpg";
});
2. 检测图片加载完成:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>img</title>
</head>
<body>
<img id="img1" src="http://202.200.119.253/cache/4/04/imgsrc.baidu.com/d0bbd98b582c402fbdca383a1c9f8755/6d81800a19d8bc3e3bad2adf888ba61ea8d34579.jpg">
<p id="p1">loading...</p>
<script type="text/javascript">
function imgLoad(img, callback) {
var timer = setInterval(function() {
if (img.complete) {
callback(img)
clearInterval(timer)
}
}, 50)
}
imgLoad(document.getElementById("img1"), function() {
document.getElementById("p1").innerHTML='loaded!!!';
})
</script>
</body>
</html>
所以浏览器都支持img的complete属性,如果为true则表明图片已经加载完毕。也适用于多个图片的检测。