Puppeteer等待所有图像加载然后采取屏幕截图

Question

我正在使用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(); 
})(); 

Answer 1

没有为一个built-in option：

await page.goto('https://www.digg.com/', {"waitUntil" : "networkidle0"}); 

networkidle0 - 考虑导航的结束是有不超过0个网络连接至少500毫秒

networkidle2 - 当网络连接数不超过2个毫秒时，请考虑导航完成。

P.S.当然，如果你正在使用像Twitter这样的无限滚动单页应用程序，它将无法工作。

Answer 2

我面对完全一样的问题。 我有一种感觉的解决方案将涉及使用：

await page.setRequestInterceptionEnabled(true); 

page.on('request', interceptedRequest => { 
    //some code here that adds this request to ... 
    //a list and checks whether all list items have ... 
    //been successfully completed! 
}); 

https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#pagesetrequestinterceptionenabledvalue