Checking for multiple images loaded

Question

I\'m using the canvas feature of html5. I\'ve got some images to draw on the canvas and I need to check that they have all loaded before I can use them.

I have declared

Answer 1

The solution with Promise would be:

const images = [new Image(), new Image()]
for (const image of images) {
  image.src = 'https://picsum.photos/200'
}

function imageIsLoaded(image) {
  return new Promise(resolve => {
    image.onload = () => resolve()
    image.onerror = () => resolve()
  })
}

Promise.all(images.map(imageIsLoaded)).then(() => {
  alert('All images are loaded')
})