Lazy Loading & Delay

Lazy loading and delay settings allow you to control when and how a webpage is fully rendered before capturing the screenshot. This is useful for pages that load content dynamically, such as JavaScript-heavy applications, images, or API-driven components. By introducing a delay, you ensure that all critical elements are fully loaded before the capture is taken, resulting in more accurate and complete screenshots.

The lazy loading feature helps wait for off-screen or deferred content to load, while the delay parameter gives you precise control over rendering timing (e.g., waiting a few seconds before capture). Together, they help improve screenshot reliability, especially for pages with asynchronous content, animations, or infinite scrolling behavior.


const axios = require("axios");

let config = {
	method: "get",
	maxBodyLength: Infinity,
	url: "https://shot.screenshotapi.net/v3/screenshot?token=TOKEN&url=https%3A%2F%2Fwww.apple.com%2F&lazy_load=true&delay=10000&[OPTIONS]",
	headers: { }
};

axios.request(config).then((response) => {
	console.log(JSON.stringify(response.data));
}.catch((error) => {
	console.log(error);
});

Hashtag
Lazy Load

Parameter Name : lazy_load

This parameter controls whether the browser should automatically scroll through the webpage to trigger and load all dynamic or delayed content before capturing the screenshot or render. This is especially important for pages that load images, components, or data only when they come into the viewport.

When enabled, the system simulates user scrolling from top to bottom of the page to ensure that all lazy-loaded elements are fully rendered before the final capture is taken. This results in a more complete and accurate representation of the entire webpage.

Options

  • true: The browser scrolls through the entire page, loading all lazy-loaded content before capturing the screenshot.

  • false: Only the initially visible content is rendered, without triggering additional scrolling or delayed content loading.

When to use

  • Use true when dealing with modern websites that use lazy loading for images, components, or infinite scroll layouts, ensuring the final output includes all content.

  • Use false when you only need a quick capture of the visible viewport or when performance and speed are more important than full content coverage.

Default value: false.

Hashtag
Scroll Delay

Parameter Name : scroll_delay

It controls the delay (in milliseconds) between each scroll step when lazy_load is enabled. Since lazy loading works by automatically scrolling from top to bottom of the page to trigger content loading, this parameter defines how much time the system should wait before moving to the next scroll position.

By adjusting this value, you can control how smoothly and thoroughly lazy-loaded content (such as images, infinite scroll sections, or dynamic components) is rendered before the final screenshot is captured.

Options

Set a numeric value in milliseconds (ms), for example:

  • 100 = faster scrolling with minimal delay

  • 300 = balanced scrolling delay (commonly used)

  • 1000 = slower scrolling for heavy or complex pages

When to use

  • Use a moderate delay (e.g., 200–500ms) for most websites to ensure lazy-loaded elements have enough time to appear during scrolling.

  • Use a higher delay for heavy pages with lots of dynamic content, images, or API-driven sections that need more time to load between scrolls.

  • Use a lower delay for simpler pages to speed up the capture process.

Default value: 500 (0.5 second).

Note: This parameter should be used carefully with long pages. If the scroll_delay is set too high and the page length is large, the total rendering time may exceed the defined timeout, resulting in a timeout error.

Hashtag
Delay

Parameter Name : delay

This parameter defines a waiting period (in milliseconds) before the screenshot or render is captured after the page has been loaded in the browser. This allows additional time for dynamic elements, animations, API responses, or scripts to fully complete rendering before the final snapshot is taken.

It is particularly useful for modern web applications where content may continue to load even after the initial page load event has fired.

Options

Set a numeric value in milliseconds (ms), for example:

  • 500 = 0.5 seconds delay

  • 2000 = 2 seconds delay

  • 0 = no delay

When to use

  • Use a higher delay when dealing with pages that include animations, charts, API-driven content, or delayed rendering components to ensure everything is fully loaded before capture.

  • Use a lower or zero delay when the page is static or already fully rendered at load time to optimize performance and speed.

Default value: 0(no delay).

Hashtag
Wait For Event

Parameter Name : wait_for_event

This parameter controls when the render should be triggered based on the page’s loading lifecycle. Instead of capturing immediately, this option allows the system to wait for a specific browser event, ensuring that the page is rendered at the right moment.

This is especially useful for modern websites where content loads in stages (e.g., images, APIs, scripts), and choosing the correct event can significantly impact the accuracy of the final screenshot.

Options

  • load: Waits until the entire page is fully loaded, including all images, stylesheets, and resources. This is the safest and most complete option for most use cases.

  • domcontentloaded: Triggers rendering as soon as the HTML is parsed. It does not wait for images, styles, or external resources, making it faster but potentially incomplete.

  • networkidle: Waits until there are no active network requests for at least 500ms. This is ideal for dynamic websites where content loads via APIs or AJAX calls.

When to use

  • Use load when you need a fully rendered page with all assets loaded, such as for reports, documentation, or visual accuracy.

  • Use domcontentloaded when speed is more important and you only need the basic structure of the page.

  • Use networkidle when working with dynamic applications (React, dashboards, SPAs) to ensure all background data has finished loading before capture.

Default value: load.

Hashtag
Timeout

Parameter Name : timeout

This parameter sets the maximum time (in milliseconds) the API will wait for a page to fully load before aborting the request. Think of it as a navigation deadline - if the page doesn't finish loading within the specified time, the request is automatically cancelled rather than hanging indefinitely. This keeps your workflow moving smoothly, even when dealing with slow or unresponsive websites.

Options

Set any numeric value in milliseconds, for example:

  • 10000 = 10 seconds

  • 60000 = 60 seconds

When to use

  • Set a higher timeout when working with complex, heavy pages — such as dashboards, large e-commerce sites, or pages that rely on multiple API calls to render fully.

  • Set a lower timeout when you want faster failure detection or are capturing lightweight pages where a long wait is unnecessary.

Default value: 100000 (100 seconds).

Note: Setting the timeout too low may cause requests to fail before the page has a chance to load.