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

Question

我正在用Puppeter编写一个脚本，其中我需要确定是否所有图像都已完成加载，即使它们未能加载，这是有问题的部分：

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，看看您可能需要对这些特定图像进行哪些额外的调试，看看它们发生了什么。