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

问题可能是您在运行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 );
            }

Answer 2

您将不得不调试正在加载哪些图像，哪些没有加载。您可以像这样检测代码，以输出图像总数以及完成时每个图像编号的状态。这将为您提供在控制台中完成的图像列表，然后您可以查看哪些未完成。

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，以查看可能需要对这些特定图像进行哪些其他调试，以查看它们的状态。

尝试确定是否已加载所有映像时，Node.js挂起

2 个答案: