我们在写 jquery 的时候一般都会写 $(document).ready,加载完成事件还有一个就是 onload
onload 与 ready 的区别是:
1、ready 是 DOM 加载完成的事件
2、onload 是所有内容加载完成(如:图片)
我们如果要判断某一块 div 中的内容是否完全加载完成可以通过 onload 事件。
同理,判断图片是否加载完成可以在 img 元素上绑定 onload 事件:
<img id="img">
document.querySelector('#img').onload = function() {}
如果需要判断多张图片,可以借助 Promise
let images = [
'1.jpg',
'2.jpg'
];
let promiseAll = [], imgs = [], total = images.length;
for (let i = 0; i < total; i++) {
promiseAll[i] = new Promise((resolve, reject) => {
imgs[i] = new Image();
imgs[i].src = images[i];
imgs[i].onload = function() {
resolve(imgs[i]);
};
})
}
Promise.all(promiseAll).then(img => {
// 全部图片加载完成
})