使用promise.all来实现所有图片都加载完成后才一起出现的效果

const loadImg = (src) => {
    return new Promise((resolve, reject) => {
      const img = new Image()
      img.src = src
      
      img.onload = ()=>{

        resolve(img)
        
      }
    //   img.onload = resolve(img)  不能这么写，包括下面的reject，因为函数带括号就代表着直接执行，那就相当于onload状态还没到的时候，后面的reslove已经执行了
      img.onerror = (e) =>{

        reject(e)

      }

    })
    
}

const imgs = ['http://hbimg.b0.upaiyun.com/57e179644693af818a9391842d6431cf717ab849ba43-g3iZ2t_fw658','http://img3.donews.com/uploads/img3/img_pic_1534749319_0.jpg','http://img.mp.itc.cn/upload/20161012/723004398c944d79ac93f3d093840e7f_th.jpg']


const promises = imgs.map((src) =>{
  return loadImg(src)
})

Promise.all(imgs.map(src =>  loadImg(src)) ).then((res) => { 
  console.log('res',res) 
  res.forEach((img) =>{
    document.body.appendChild(img)
  })
}).catch((e)=>{
  console.log('e',e)
})

promises的效果就是imgs.map(src => loadImg(src)) 因为map可以自动遍历imgs，并把他们通过loadImg变为单个的promise对象