Puppeteer wait for all images to load then take screenshot : <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>
