我正在使用Puppeteer尝试在加载所有图像后对网站进行截图,但无法使其正常工作。
下面是我到目前为止得到的代码,我使用https://www.digg.com作为示例网站:
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://www.digg.com/');
await page.setViewport({width: 1640, height: 800});
await page.evaluate(() => {
return Promise.resolve(window.scrollTo(0,document.body.scrollHeight));
});
await page.waitFor(1000);
await page.evaluate(() => {
var images = document.querySelectorAll('img');
function preLoad() {
var promises = [];
function loadImage(img) {
return new Promise(function(resolve,reject) {
if (img.complete) {
resolve(img)
}
img.onload = function() {
resolve(img);
};
img.onerror = function(e) {
resolve(img);
};
})
}
for (var i = 0; i < images.length; i++)
{
promises.push(loadImage(images[i]));
}
return Promise.all(promises);
}
return preLoad();
});
await page.screenshot({path: 'digg.png', fullPage: true});
browser.close();
})();
5条答案
按热度按时间ukdjmx9f1#
有一个内置的选项:
networkidle0
-当至少500毫秒内没有超过0个网络连接时,认为导航已完成networkidle2
-当至少500毫秒内没有超过2个网络连接时,认为导航完成。当然,如果你使用的是像Twitter这样的无休止滚动的单页应用程序,它就不起作用了。
Puppeteer GitHub issue #1552为
networkidle2
背后的动机提供了解释。soat7uwm2#
另一个选项,实际计算以在加载所有图像时获得回调
此选项也适用于不支持wait
networkidle0
选项的setContentcqoc49vn3#
等待延迟加载图像
您可能需要考虑先使用
Element.scrollIntoView()
之类的方法向下滚动,以解决延迟加载图像的问题:i1icjdpr4#
我也面临着同样的问题。我有一种感觉,解决方案将涉及使用:
https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#pagesetrequestinterceptionenabledvalue
dvtswwa35#
我找到了一个解决方案,它适用于多个网站使用**page.setViewPort(...)**方法如下: