Promise异步加载图片

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);
})