JavaScript: verificare l'avvenuto caricamento delle immagini con le Promise e il modello async/await

Possiamo sfruttare le Promise ed il modello async/await di JavaScript per verificare l'avvenuto caricamento delle immagini.

La soluzione è la seguente:

'use strict';

const imgReady = element => {
    return new Promise((resolve, reject) => {
        if(!element) {
            reject(null);
        } else {
            let img = new Image(element.getAttribute('src'));
	        img.addEventListener('load', () => {
                if(this.complete) {
                    resolve(true);
                }
            });

            img.addEventListener('error', () => {
                reject(false);
            });
        }
    });	
};

const imagesToLoad = () => {
    let images = document.querySelectorAll('img');
    let todo = [];
    for(let i = 0; i < images.length; i++) {
        todo.push(imgReady(images[i]));
    }
    return Promise.all(todo);
};

const imagesLoaded = async () => {
    try {
        let loaded = await imagesToLoad();
        //...
    } catch(err) {
        //...
    }
};