title: Puppeteer wait for all images to load then take screenshot
body: <p>I am using <a href="https://github.com/GoogleChrome/puppeteer" rel="noreferrer">Puppeteer</a> to try to take a screenshot of a website after all images have loaded but can't get it to work.</p>
  
  <p>Here is the code I've got so far, I am using <a href="https://www.digg.com" rel="noreferrer">https://www.digg.com</a> as the example website:</p>
  
  <pre><code>const puppeteer = require('puppeteer');
  
  (async () =&gt; {
      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(() =&gt; {
          return Promise.resolve(window.scrollTo(0,document.body.scrollHeight));
      });
  
      await page.waitFor(1000);
  
      await page.evaluate(() =&gt; {
          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 &lt; images.length; i++)
              {
                  promises.push(loadImage(images[i]));
              }
  
              return Promise.all(promises);
          }
  
          return preLoad();
      });
  
      await page.screenshot({path: 'digg.png', fullPage: true});
  
      browser.close();
  })();
  </code></pre>