JS 判断图片加载是否完成
2018-10-11 本文已影响61人
大雄的学习人生
首先写一个包含一张图片的静态页面，如下：
<!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)
