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

Posted 2021-02-21 俄罗斯方块

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS判断图片加载完成的方式相关的知识，希望对你有一定的参考价值。

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>

定时器判断是否加载完成

以上是关于JS判断图片加载完成的方式的主要内容，如果未能解决你的问题，请参考以下文章

JavaScript判断图片是否加载完成的三种方式

jQuery 是如何判断HTML页面加载完毕的？它的原理是啥?