首先写一个包含一张图片的静态页面，如下：
<!DOCTYPE html><head> <meta charset="utf-8"></head><body> <img id='img1' style="width:200px" src="https://pic.songma.com/wenzhang/20181011/ve3cac10qpq885.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)