promise小案例

页面中有个板块，需要多张图片加载完之后才能进行显示

 

 

 

            //页面中有个板块 需要多张图片加载完之后才能进行显示
            const loadImg = (src) => {
                return new Promise( (resolve,reject) =>{
                    const img = new Image();
                    
                    img.src = src;
                    
                    
                    img.onload = () => {
                        resolve(img);
                    };
                    //这个是固定的用法，也可以理解为绑定的事件，img.onload表示当图片加载完后执行，img.onerror表示当图片加载失败时运行。
                    img.onerror = (e) => {
                        reject(e);
                    };
                });
            };
            
            
            const imgs = [
                'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1576028024,2351896536&fm=26&gp=0.jpg',
                'http://image.biaobaiju.com/uploads/20190624/14/1561356377-numQVJXlIt.jpeg',
                'http://image.biaobaiju.com/uploads/20190624/14/1561356377-qltwxhdeCL.jpeg',
                'http://image.biaobaiju.com/uploads/20190624/14/1561356380-mFWDIlTCgn.jpg'
            ]
            
            //map函数处理imgs数组,并返回一个数组,里面是图片对象
            const promises = imgs.map((src) => {
                return loadImg(src);
            });
            
            Promise.all(promises).then((arr) => {
                console.log(arr);
                arr.forEach((img) => {
                    document.body.appendChild(img)
                }); 
            }).catch((e) => {
                console.log(e);
            })