Skip to content

Instantly share code, notes, and snippets.

@QuynhVir
Forked from schnerd/lazy-load-puppeteer.js
Created September 17, 2023 07:04
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save QuynhVir/afae630a68a0f39bffb6fa07fd095699 to your computer and use it in GitHub Desktop.
Save QuynhVir/afae630a68a0f39bffb6fa07fd095699 to your computer and use it in GitHub Desktop.
Lazy-loading content in Puppeteer
function wait (ms) {
return new Promise(resolve => setTimeout(() => resolve(), ms));
}
export default async function capture(browser, url) {
// Load the specified page
const page = await browser.newPage();
await page.goto(url, {waitUntil: 'load'});
// Get the height of the rendered page
const bodyHandle = await page.$('body');
const { height } = await bodyHandle.boundingBox();
await bodyHandle.dispose();
// Scroll one viewport at a time, pausing to let content load
const viewportHeight = page.viewport().height;
let viewportIncr = 0;
while (viewportIncr + viewportHeight < height) {
await page.evaluate(_viewportHeight => {
window.scrollBy(0, _viewportHeight);
}, viewportHeight);
await wait(20);
viewportIncr = viewportIncr + viewportHeight;
}
// Scroll back to top
await page.evaluate(_ => {
window.scrollTo(0, 0);
});
// Some extra delay to let images load
await wait(100);
return await page.screenshot({type: 'png'});
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment