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)

推荐阅读更多精彩内容

  • pdf下载地址:Java面试宝典 第一章内容介绍 20 第二章JavaSE基础 21 一、Java面向对象 21 ...
    王震阳阅读 77,475评论 25 510
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 127,724评论 18 546
  • 今天下班还算准时,凌晨五点(夜班)就下班了,这要是搁在平时,至少得加班一个钟头左右,我出门便四处张望,不远处一辆摩...
    奔跑或东篱阅读 14评论 0 0
  • 父亲离家已经有几年了,一直没有太多消息,也没有回过家,偶有一个电话打到邻居家里,我和母亲小跑着去接,那时候我对父亲...
    偏爱向日葵阅读 23评论 0 0
  • 今日应邀参加了国药控股北京天星普信生物医药有限公司的的一个医疗器械招商会,这次招商会大约有200多人参与,地址...
    张飞龙在天阅读 1,911评论 0 1