Promise异步加载图片
异步加载:也称为图片的预加载。利用js代码提前加载图片,用户需要时可以直接从本地缓存获取,但是会增加服务器前端的压力。这样做可以提高用户的体验,因为同步加载大图片的时候,图片会一层一层的显示处理,但是经过预加载后,直接显示出整张图片。但是在图片响应时间上优化不是那么明显。
使用promise
代码如下:
function asyncLoadImg(src) {
const promise = new Promise((resolve, reject) => {
const img = document.createElement('img')
// onload 事件会在页面或图像加载完成后立即发生。
img.onload = () => {
resolve(img)
}
img.onerror = () => {
const error = new Error(`图片加载失败,url:${src}`)
reject(error)
}
img.src = src
})
return promise
}
const url = 'https://t7.baidu.com/it/u=4036010509,3445021118&fm=193&f=GIF'
const url2 = 'https://t7.baidu.com/it/u=963301259,1982396977&fm=193&f=GIF'
asyncLoadImg(url)
.then(img1 => {
console.log(img1);
return asyncLoadImg(url2)
})
.then(img2 => {
console.log(img2);
})
.catch(error => {
console.log(error);
})
使用async await
代码如下:
function asyncLoadImg(src){
return new Promise((resolve, reject)=>{
const img = document.createElement('img')
img.onload = () => {
resolve(img)
}
img.onerror = () => {
const error = new Error(`图片加载失败,url:${src}`)
reject(error)
}
img.src = src
})
}
async function loadImg(src){
let res =await asyncLoadImg(src)
console.log(res)
}
const url = 'https://t7.baidu.com/it/u=4036010509,3445021118&fm=193&f=GIF'
const url2 = 'https://t7.baidu.com/it/u=963301259,1982396977&fm=193&f=GIF'
loadImg(url).then(img1 => {
console.log(img1);
return loadImg(url2)
}).then(img2 => {
console.log(img2);
}).catch(error => {
console.log(error);
})