Puppeteer: Lazy images not loading in headless mode

Question

Here is my code. I am using AdBlock Plus Extension.

I have a task to take a screenshot for the web page(Have used lazy loading) with images in the right sidebar under the heading PAID CONTENT and images on the bottom under the heading PAID CONTENT.

const puppeteer = require('puppeteer');
const fs = require('fs');

(async () => {
  const pathToExtension = require('path').join(__dirname, 'abp_chrome');

  const browser = await puppeteer.launch({
    headless: true,
    args: [
     `--disable-extensions-except=${pathToExtension}`,
     `--load-extension=${pathToExtension}`
   ]
 });

 const page = await browser.newPage();
 await timeout(5000);
 await page.setViewport({width: 1200, height: 1200});
 await page.goto('https://edition.cnn.com/2015/07/31/world/mh370-debris- 
   investigation/index.html', {waitUntil: 'load', timeout: 0});
 await page.evaluate(() => {
   window.getDimensions = function(element) { 
    rect = element.getBoundingClientRect();
    return {
     x: rect.x,
     y: rect.y,
     width: rect.width,
     height: rect.height
  };
 };
});
await autoScroll(page);  
await page.screenshot({path: 'example.png', fullPage: true});
await browser.close();
})();

 async function timeout(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
 }

 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();
     }
    }, 500);
   });
 });
}

I have used scrolling to load lazy images, but images are not loading as I have seen in screenshot.

Here is captured screenshot from code. As in screenshot, there is no images tiles, Is there any way I can accomplish this?

user_9373950 · Answer

I have fixed this with the help of the GitHub issue.

I have added user agent:

page.setUserAgent("Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.181 Safari/537.36
WAIT_UNTIL=load")

user_1476983 · Answer

async function autoScroll(page){
   let criteria=3; //lazy load 3 page
   for (let pageIndex = 1; pageIndex < criteria; pageIndex++) {
      await page.evaluate(async () => {
        let x = await document.querySelectorAll(
          'set lazy element selector array'
        );
        await x[x.length - 1].scrollIntoView();
        return x.length;
      });
      await page.waitFor(1000);  
   }
}

Puppeteer: Lazy images not loading in headless mode

2 Answers