前端

JS判断图片加载完成的方式

云博小周宇1 Min Read

1.onload事件

<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <title>img - load event</title>
</head>

<body>
    <img id="img1" src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2567670815,24101428&fm=26&gp=0.jpg">
    <p id="p1">loading...</p>
    <script type="text/javascript">
        img1.onload = function () {
            p1.innerHTML = ‘loaded‘
        }
    </script>
</body>

</html>

所有浏览器都支持img的load事件

2.img的complete事件

<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <title>img - complete attribute</title>
</head>

<body>
    <img id="img1" src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2567670815,24101428&fm=26&gp=0.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(img1, function () {
            p1.innerHTML = "加载完毕"
        })
    </script>
</body>

</html>

定时器判断是否加载完成