监听img元素是否加载完成
# 监听img元素是否加载完成
参考：判断图片是否加载完成的三种方式 (opens new window)
# onload
<div class="img-content">
<img src="https://images.unsplash.com/photo-1558979158-65a1eaa08691?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80"
alt="">
<img src="https://images.unsplash.com/photo-1572276596237-5db2c3e16c5d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80"
alt="">
<img src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1353&q=80"
alt="">
<img src="https://images.unsplash.com/photo-1551009175-8a68da93d5f9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1351&q=80"
alt="">
<img src="https://images.unsplash.com/photo-1549880338-65ddcdfd017b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80"
alt="">
</div>
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
var imgList = document.getElementsByTagName('img')
for (var i in imgList) {
imgList[i].onload = function () {
console.log('加载完成');
}
console.log(imgList[i].complete);
})
1
2
3
4
5
6
7
2
3
4
5
6
7
# complete
var imgList = document.getElementsByTagName('img')
var timer = setInterval(() => {
for (var i in imgList) {
if (imgList[i].complete) {
console.log('加载完成');
clearInterval(timer)
}
}
})
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
在GitHub上编辑 (opens new window)
上次更新: 10/20/2021, 4:18:25 PM