javascript关于图片加载的处理

版权声明:本文为博主原创文章,未经博主允许不得转载。 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则表明图片已经加载完毕。也适用于多个图片的检测。



猜你喜欢

转载自blog.csdn.net/u010271602/article/details/78248057