通过js判断多个请求是否加载完毕
判断下面3张图片是否全部加载完毕
var imgStr = [
'https://img10.360buyimg.com/da/jfs/t14395/79/2162545826/196335/87c2c3f2/5a718ab1N5fa358da.jpg',
'https://img10.360buyimg.com/da/jfs/t15181/264/2141469177/100278/a325be09/5a7134eaNd79570bc.jpg',
'https://m.360buyimg.com/babel/jfs/t19699/281/383788365/50387/1ddabaee/5a719ce8Nee5a9273.jpg'
]
通过比较传统的方式实现
var img = [],
flag = 0;
for(var i = 0, len = imgStr.length; i < len; i++) {
img[i] = new Image();
img[i].src = imgStr[i];
img[i].onload = function() {
flag++
if(flag === imgStr.length) {
console.log('已全部加载完毕')
}
}
}
通过Promise方式实现
let imgLoadAll = [], img = [];
for(let i = 0, len = imgStr.length; i < len; i++) {
imgLoadAll[i] = new Promise((resolve, reject)=>{
img[i] = new Image()
img[i].src = imgStr[i]
img[i].onload = function() {
resolve(img[i])
}
img[i].onerror = function() {
reject(img[i])
}
})
}
// 第一张图加载完毕
imgLoadAll[0].then((img) => {
console.log('第一张图加载完毕')
}).catch((img)=> {
console.log('第一张图加载失败')
})
// 全部加载完毕
Promise.all(imgLoadAll).then((img) => {
console.log('全部加载完毕')
}).catch((img)=> {
console.log('全部加载失败')
})
