JS判断图片加载是否完成

首先写一个包含一张图片的静态页面，如下：

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <img
        id='img1'
        style="width:200px"
        src="http://pic1.win4000.com/wallpaper/f/51c3bb99a21ea.jpg" />
    <p id="flag" >
        loading...
    </p>
    <script>
        var flag = document.getElementById('flag');
        var img1 = document.querySelector('#img1');
    </script>
</body>

为了通过 JS 判断图片加载是否完成，可以采用以下三种方式：

        // 方式一 监听onload （不兼容 IE8 及其以下的浏览器）
        img1.onload = function() {
            console.log('1:', Date.now())
            flag.innerHTML = 'loaded1'
        }
        // 方式二 监听onreadystatechange // 只支持 IE
        img1.onreadystatechange = function () {
            if (this.readyState === "complete" || this.readyState === "loaded") {
                flag.innerHTML = "loaded2"
            }
        }
        // 方式三 轮询 complete 属性
        var timer = setInterval(function() {
            if (img1.complete) {
                flag.innerHTML = 'load3'
                clearInterval(timer)
            }
        }, 50)

最后编辑于：2018.10.22 11:03:42

JS判断图片加载是否完成

推荐阅读更多精彩内容