js如何判断所有图片加载完毕

如何判断网页中的所有图片加载完毕，一个简单的方法是监听img的onload事件，并配合异步函数编程技巧来实现对所有图片的判断。

函数封装

下面使用async关键字定一个异步函数，返回的是promise对象。

/**

* root是要监听的根元素，我们要对root节点内的img元素进行监听

* 这里用到Promise.all

*/

const onAllImgLoaded = async (root) => {

const imgNodes = root instanceof HTMLImageElement ? [root] : root.querySelectorAll('img');

//为了使用Array的map方法

let imgArr = Array.prototype.slice.call(imgNodes);

return await Promise.all(

imgArr.map(img=> {

new Promise(resolve=>{

img.addEventListener('load',()=> resolve(img))

})

})

)

}

用法

onAllImgLoaded(document.getElementById("mydiv")).then((datas)=>{

//...

});

注意事项

onAllImgLoaded时间得到相应时，表示所有图片加载完毕，或者是出现错误。如果要处理图片元素尺寸、样式等相关内容，应设置定时器延时处理。