load images with Promises from MPJ

app.js

import loadImage from 'loadImage'

const addImg = (src) => {
  const imgEl = document.createElement('img')
  imgEl.src = src
  document.body.appendChild(imgEl)
}
const imgArr = [
  loadImage('images/cat1.jpg'),
  loadImage('images/cat2.jpg'),
  loadImage('images/cat3.jpg'),
]

Promise.all(imgArr)
  .then(imgs => images
  .forEach(img => addImg(img.src))
  .catch(err => alert(err))

loadImage.js

function loadImage(url) {
  return new Promise((resolve, reject) => {
    let image = new Image()
    
    image.onload = () => resolve(image)
    const msg = `Could not load image at ${url}`
    image.onerror = () => reject(new Error(msg))
    image.src = url  
  })
}

export default loadImage

promise-example-loading-images.md

Promise example with loading images 🚀

An example of Promises from MPJ, on YouTube.