Node.js зависает при попытке определить, все ли изображения были загружены

Question

Я пишу сценарий с Puppeteer, в котором мне нужно определить, все ли изображения закончили загрузку, даже если они не удалось загрузить, вот проблемная часть:

var images = await page.evaluate(function() {

    return new Promise(
        function(resolve, reject) {
            var imgs = document.images,
                imagesNumber = imgs.length,
                counter = 0;

            if (imagesNumber == 0)
            {
                resolve({images: []});
            }

            for (var i = 0; i < imgs.length; i++)
            {
                imgs[i].addEventListener( 'load', incrementCounter, false );
                imgs[i].addEventListener( 'error', incrementCounter, false );
            }

            function incrementCounter() {
                counter++;

                if ( counter === imagesNumber ) {
                    resolve({images: imgs});
                }
            }
        }
    )
});

Я не уверен, что делаю неправильно, но nodejs просто зависает в этом коде. Любые идеи приветствуются.

Answer 1

Вам нужно будет отладить, какие изображения загружаются, а какие нет. Вы можете настроить свой код таким образом, чтобы вывести общее количество изображений и статус каждого номера изображения по завершении. Это должно оставить вас со списком изображений, которые завершены в консоли, и вы сможете увидеть, какие из них не сделали.

var images = await page.evaluate(function() {

    return new Promise(function(resolve, reject) {
        var imgs = document.images,
            imagesNumber = imgs.length,
            counter = 0;

        if (imagesNumber === 0) {
            resolve({images: []});
        }

        console.log(`Total images: ${imgs.length}`);
        for (var i = 0; i < imgs.length; i++) {
            if (imgs[i].complete) {
                console.log(`Image ${i} already complete, counter=${counter}`);
                incrementCounter();
            } else {
                imgs[i].addEventListener( 'load', incrementCounter(i, 'load'), false );
                imgs[i].addEventListener( 'error', incrementCounter(i, 'error'), false );
            }
        }

        function incrementCounter(i, status) {
            return function() {
                console.log(`Image ${i} ${status}, counter=${counter}`)
                counter++;

                if ( counter === imagesNumber ) {
                    console.log("All images loaded");
                    resolve({images: imgs});
                }
            }
        }
    });
});

Как только вы узнаете, какие изображения еще не завершены, вы можете просмотреть HTML-код, чтобы увидеть, какая дополнительная отладка вам может понадобиться для этих конкретных изображений, чтобы увидеть, что с ними происходит.

Answer 2

Возможно, проблема в том, что некоторые изображения уже загружены при запуске page.evaluate.

Чтобы проверить, загружено ли уже изображение, вы можете использовать атрибут complete:

            for (var i = 0; i < imgs.length; i++)
            {
                if (imgs[i].complete) {
                    counter += 1;
                }
                imgs[i].addEventListener( 'load', incrementCounter, false );
                imgs[i].addEventListener( 'error', incrementCounter, false );
            }