需求:
有一个图片列表,我想要在图片onload成功之后获取加载成功的图片列表,图片资源加载为异步,我们使用ES7的async await方式实现,多张图片,是用for循环。
注意:
图片加载失败一定要加监听,await只有在有返回之后才会继续向下执行,无论成功与失败,否则第一张图加载失败,下面的await的都不会执行。
代码
实现:
let successImageList = [];
let imageUrlList = ["https://aaa.jpg", "http://image.biaobaiju.com/uploads/20190508/17/1557306553-NZiDWHaGKu.jpg", "http://img5.imgtn.bdimg.com/it/u=3025209343,1849399022&fm=26&gp=0.jpg"]
async function getSuccessImageList() {
let imgTotal = imageUrlList.length;
for (let i = 0; i < imgTotal; i++) {
//第i张图片加载完成,push到新数组中
await addImageProcess(imageUrlList[i]).then((src) => {
console.log(`第${i}张图片src:${src}`)
successImageList.push(src);
}).catch((err)=>{
console.log(`第${i}张图片:${err}`)
console.log(successImageList)
function addImageProcess(src) {
return new Promise((resolve, reject) => {
let img = new Image()
img.onload = () => resolve(src)
img.onerror = ()=>reject("加载失败")
img.src = src;
}catch(err){
console.log(err)