Как загрузить асинхронный набор изображений в JS? - PullRequest
Новая
       17

Как загрузить асинхронный набор изображений в JS?

0 голосов
/ 12 мая 2019

Я создаю страницу галереи, которая будет показывать изображения, полученные из API.Я делаю это через класс в ES6.В какой-то момент мне нужно дождаться загрузки всех изображений (не только из API, но и из моего HTML).После этого я добавляю / удаляю определенные классы CSS в некоторых контейнерах.К сожалению, мой код не хочет быть асинхронным.

Я использую класс ES6, async / await и обещания напрямую.Я перепробовал много решений, найденных в стековом потоке, но у меня ничего не работает. 

//here i want to wait for runFirstSearch and _renderButton to end completely.
async _renderElements(){
    await this.runFirstSearch();
    await this._renderButton();
document.getElementById(`"photoSet${this._step}"`).classList.remove("unvisible");        document.getElementById("showMore").classList.classList.remove("unvisible");
document.getElementById("loader").classList.add("unvisible");
}

// runFirstSearch is using function _renderPhotos:

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


        const checkImage = path => {new Promise (resolve =>{
            const img = new Image();

            img.onload=() => {
                console.log("photo is uploaded");
                photoSetDiv.appendChild(img);
                resolve(path)}
            img.src=path;
        })};
        Promise.all(urlArray.map(checkImage)).then(result => 
        this._container.appendChild(photoSetDiv) );

        // here is my initial, synchronous code when I didn't think about asynchronous -> it can help in understanding my plan.
    //     data.forEach((image, index) =>{
    //         const classCSS = index === 4  ? "photo2":"photo1";
    //         let img= new Image();
    //         img.onload = function(){
    //             console.log("ahfikhfhwoi");
    //             photoSetDiv.appendChild(this);
    //         };
    //         img.src=image.url;
    //         img.classList.add(classCSS);
    //     });

    // this._container.appendChild(photoSetDiv);
    }

Я хочу дождаться разрешения всех событий загрузки в функции _renderPhotos и после этого перейти к следующему элементу.: document.getElementById ("photoSet${this._step}"). classList.remove ("невидимый");

...