图片异步加载
function Create(url) {
return new Promise((resolve, reject) => {
let oimg = new Image();//创建img标签
oimg.onload = () => {
resolve(oimg)
}
oimg.onerror = () => {
reject(`'${oimg}' is not find`)
}
oimg.src = url
})
}
Create('./img/1.jpg').then(res => {
document.body.append(res)
console.log(res)
})
一次性异步加载多张图片
function Create(url) {
return new Promise((resolve, reject) => {
let oimg = new Image();//创建img标签
oimg.onload = () => {
resolve(oimg)
}
oimg.onerror = () => {
reject(`'${oimg}' is not find`)
}
oimg.src = url
})
}
let imglist = ['./img/1.jpg', './img/2.jpg', './img/3.jpg', './img/4.jpg'];
Promise.all(imglist).then((result) => {
result.forEach(imgsrc => {
Create(imgsrc).then(res => {
document.body.append(res)
})
})
console.log(result)// ["./img/1.jpg", "./img/2.jpg", "./img/3.jpg", "./img/4.jpg"]
}).catch((error) => {
console.log(error)// 失败了,打出 '失败'
})
转载链接:https://blog.csdn.net/weixin_45685544/article/details/101617630