Как загружать изображения синхронно?

Question

Я пытаюсь отложить показ изображений до тех пор, пока все они не будут загружены (в браузере), но мой код продолжается (не ждет загрузки).

Я использую обещания и async-await. Вот мой код:

async _renderPhotos(data){
    console.log("step6.1");
    const photoSetDiv = document.createElement("div");
    photoSetDiv.classList.add("photoSet");
    // photoSetDiv.classList.add("unvisible");
    photoSetDiv.id=`photoSet${this._step}`;
    const urlArray=data.map( image => image.url);

    await this._uploadAllImages(data, photoSetDiv);
    console.log("step6.3");
    this._container.appendChild(photoSetDiv);

}

 _uploadAllImages(array, container){
    var index=0;

    //upload each of the images is  separate promise
    function checkImage(item){new Promise ((resolve, reject) =>{

        //Creating <figure>, <img> and <div>.
        const figure = document.createElement("figure");
        figure.classList.add(item.site);
        const title = document.createElement("div");
        title.classList.add("titleImage");
        title.innerHTML =`#${item.site}`;
        figure.appendChild(title);
        const img = new Image();
        img.classList.add("image");

        img.onload=() => {
            console.log("step 6.2");
            const classCSS=figureClass(index);
            figure.classList.add(classCSS);
            figure.appendChild(img);
            container.appendChild(figure);
            index ++;
            resolve(item)}

        img.src=item.url;
        // Event on the image: after clicking on the image it is erlarged
        img.onclick= () => {
            modal.style.display = "block";
            modalImg.src=item.url;
        };
    })};

    return  Promise.all(array.map(checkImage));
}

Я хочу дождаться загрузки изображений. Эквивалент: отобразить в консоли в следующем порядке: шаг 6.1 Шаг 6.2 (много раз из-за множества изображений) шаг 6.3

Answer 1

Одна из ловушек await и Promise.all / race заключается в том, что вы можете использовать их для не-обещаний, которые будут просто оценивать само значение. Итак, это:

  await undefined;
  await Promise.all([ undefined, undefined ]);

просто пробежит прямо, без каких-либо предупреждений (хорошо, не совсем, подождет два микротика).

И вот что происходит в вашем случае. Вы не return обещаете, что создали из checkImage, поэтому вы в основном вызываете Promise.all для массива undefined s.