使用promise解决图片异步加载

promise解决图片异步加载

解决多张图片异步加载

   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)// 失败了，打出 '失败'
        })

解决一张图片异步加载

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