Lazy Loading

Lazy loading is a web technique that delays loading off-screen resources until they are about to enter the viewport. It is used for images, iframes, videos and whole page sections.

Browsers support it natively through the loading attribute on img and iframe elements, set to lazy, defined in the HTML Living Standard. Sites also implement it in JavaScript, usually with the IntersectionObserver API, which reports when an element approaches the visible area.

Until a resource loads, the page shows a placeholder: an empty box, a solid color, a blurred preview or a spinner. Lazy loading reduces initial page weight and speeds up the first view.

How lazy loading works

1. The page loads with placeholders for off-screen images.
2. The browser or a script watches each placeholder's position.
3. When the user scrolls near it, the real file is requested.
4. The image replaces the placeholder once it arrives.

Infinite scroll uses the same idea for content: new items are fetched when the user reaches the end of the list.

Lazy loading and screenshots

A full-page capture that renders the whole page at once does not scroll, so lazy content below the fold may never be requested. The result shows blank boxes or blurred previews. A viewport capture is less affected, because it only shows what is visible.

Detecting lazy-loaded content

• Look for empty or gray boxes in the lower part of a full-page capture.
• Scroll the page by hand and watch for images that fade in.
• Inspect image elements in browser DevTools for the loading attribute or placeholder sources.
• Compare a quick capture with one taken after a delay.

In Temposhot Website Capture, choose Network idle as the Wait setting or add a delay of 0-60 seconds. The Temposhot Full Page Screenshot extension scrolls the active page while capturing, which triggers scroll-based loading.

Common mistakes

• Capturing at the load event and assuming the page is complete.
• Setting a long delay without scrolling, which does not help scroll-triggered images.
• Capturing infinite-scroll pages as "full page", which never ends cleanly.
• Ignoring blurred placeholder images that look loaded at small sizes.

Taking the same screenshots again and again?

Set the wait condition once and reuse it for every URL in website screenshot automation.

Common questions

Does a longer delay fix lazy-loaded images?

It helps when content loads on a timer or after network activity. Scroll-triggered content needs scrolling.

Should I avoid lazy loading on my own site?

No. It improves speed. Keep above-the-fold images eager so they load immediately.

Sources

• Lazy loading (Wikipedia)
• HTML Living Standard: URLs and fetching

Related resources

• Website Capture options: wait and delay settings.
• Full-page screenshot: capturing the whole page height.