Promiseロード画像の使い方の詳細
3105 ワード
今はPromiseで自分がフロントエンドだと言うのは耻ずかしくありませんが、Promiseはなぜ怒っているのか、一言でコールバックネストと実行順序の問題を解決した最も重要な私は順序の問題を解決していると感じています.
しかし、書く前にpromiseがどのように問題を解決し、どのように使うかを見てみましょう.画像demoを順番にロードするには、次の手順に従います.
//結局問題なし
次にpromiseのやり方を試してみましょう
次にPromiseを見てみましょうall,
完了...
しかし、書く前にpromiseがどのように問題を解決し、どのように使うかを見てみましょう.画像demoを順番にロードするには、次の手順に従います.
// img1，img2，img3， 1，2，3
let url1 = "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3293635140,3955114282&fm=26&gp=0.jpg"
let url2 = "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1019333328,1858047370&fm=26&gp=0.jpg"
let url3 = "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=4226468334,723383513&fm=26&gp=0.jpg"
let oImg1 = new Image()
oImg1.onload = function() {
console.log('img1 ')
let oImg2 = new Image()
oImg2.onload = function() {
console.log('img2 ')
let oImg3 = new Image()
oImg3.onload = function() {
console.log('img3 ')
console.log(' ')
}
oImg3.src = url3
}
oImg2.src = url2
}
oImg1.src = url1//結局問題なし
次にpromiseのやり方を試してみましょう
function loadImg(url) {
let img = new Image()
img.src = url
return new Promise((resolve, reject) => {
img.onload = () => {
console.log(url)
resolve()
}
img.onerror = (e) => {
reject(e)
}
})
}
loadImg(url1).then(() => {
return loadImg(url2)
}).then(() => {
return loadImg(url3)
})次にPromiseを見てみましょうall,
// img1，img2
let urls = ["https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3293635140,3955114282&fm=26&gp=0.jpg",
"https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1019333328,1858047370&fm=26&gp=0.jpg"
]
function loadImg(url) {
let img = new Image()
img.src = url
return new Promise((resolve, reject) => {
img.onload = () => {
resolve(img)
}
img.onerror = (e) => {
reject(e)
}
})
}
function loadAll(arr) {
let result = []
arr.forEach(item => {
let p = loadImg(item).then((img) => {
console.log(img)
})
// Promise
console.log(p)
result.push(p)
});
Promise.all(result).then(() => {
//
console.log("done")
}).catch((err) => {
//
console.log(err)
});
}
loadAll(urls)完了...