'Dynamic API is not calling on a scroll in puppeteer

I am trying to take a screenshot of a page in which images are dynamically loading on scroll. Using puppeteer on a scroll, image API is not calling. So all images are not loading for a page. I am using below code. Please help for this.

const puppeteer = require('puppeteer');
    
    (async () => {
        const browser = await puppeteer.launch({
            headless: false
        });
        const page = await browser.newPage();
        await page.goto('https://www.chapters.indigo.ca/en-ca/new-arrivals/?link-usage=Header%3A%20New&mc=NewArrivals&lu=Main/', { waitUntil: 'load' });
        await page.setViewport({
            width: 1200,
            height: 800
        });
    
        await autoScroll(page);
    
        await page.screenshot({
            path: 'yoursite.png',
            fullPage: true
        });
    
        await browser.close();
    })();
    
    async function autoScroll(page) {
        await page.evaluate(async () => {
            await new Promise((resolve, reject) => {
                var totalHeight = 0;
                var distance = 100;
                var timer = setInterval(() => {
                    var scrollHeight = document.body.scrollHeight;
                    window.scrollBy(0, distance);
                    totalHeight += distance;
    
                    if (totalHeight >= scrollHeight) {
                        clearInterval(timer);
                        resolve();
                    }
                }, 100);
            });
        });
    }


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source