Home Arrow Icon Knowledge base Arrow Icon Global Arrow Icon Can Browsershot capture a webpage with lazy-loaded content
    Browsershot lazy loading screenshot web capture `waitUntilNetworkIdle()` scroll-to-bottomjs webpage screenshot


Can Browsershot capture a webpage with lazy-loaded content


here is how you can use Browsershot to capture a webpage with lazy-loaded content:

Browsershot can handle pages that implement lazy loading, but you need to ensure the page is fully loaded before taking the screenshot. The key is to scroll the page down to the bottom to trigger the lazy loading of all the images and content.

To do this with Browsershot, you can use the `waitUntilNetworkIdle()` method. This will wait until the network is idle before taking the screenshot, ensuring all lazy-loaded content has finished loading.

Here's an example:

php
Browsershot::url('https://example.com')
    ->waitUntilNetworkIdle()
    ->save($pathToImage);

The `waitUntilNetworkIdle()` method will scroll the page to the bottom and wait until there are no more network requests for at least 500ms before taking the screenshot. This ensures the page is fully loaded, including any lazy-loaded content.

Additionally, you can use a third-party library like `scroll-to-bottomjs` to explicitly scroll the page to the bottom before taking the screenshot:

php
Browsershot::url('https://example.com')
    ->setJavaScript('
        var scrollToBottom = require("scroll-to-bottomjs");
        scrollToBottom();
    ')
    ->waitUntilNetworkIdle()
    ->save($pathToImage);

This will execute the `scroll-to-bottomjs` library on the page, scrolling it to the bottom, before taking the screenshot.

The search results also mention that you may need to adjust the scrolling speed or add a delay before taking the screenshot if you're still having issues with lazy-loaded content not being captured correctly. Monitoring the network activity and inspecting the DOM can help troubleshoot any remaining issues.

Citations:
[1] https://stackoverflow.com/questions/tagged/browsershot
[2] https://www.browserstack.com/docs/percy/stabilize-screenshots/lazy-loading
[3] https://laracasts.com/discuss/channels/laravel/browsershot-incredibly-slow
[4] https://www.browserstack.com/guide/visual-test-lazy-loading-in-puppeteer
[5] https://github.com/spatie/browsershot/activity