需求：有一個圖片串列，我想要在圖片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() { try{ 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) } } getSuccessImageList()
以上圖片鏈接從百度圖片獲取，侵刪，
參考鏈接：
https://zhuanlan.zhihu.com/p/68117645
https://stackoverflow.com/questions/46399223/async-await-in-image-loading
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/131654.html
標籤：JavaScript
上一篇：你不知道的空格