js 判断图片是否加载完成(使用 onload 事件)

我们在写 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 => {
// 全部图片加载完成
})

  

上一篇:SPOJ BALNUM


下一篇:jquery 解析xml字符串