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

2021-03-18 01:24

阅读:617

标签:浏览器   round   javascrip   pre   rip   判断   src   nload   utf-8   

1.onload事件

DOCTYPE HTML>
html>

head>
    meta charset="utf-8">
    title>img - load eventtitle>
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 attributetitle>
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判断图片加载完成的方式

标签:浏览器   round   javascrip   pre   rip   判断   src   nload   utf-8   

原文地址:https://www.cnblogs.com/codexlx/p/12776382.html


评论


亲,登录后才可以留言!