Lazy Loading with Intersection Observer: AI Code Example

This prompt asks an AI coding assistant to generate a performant image gallery that defers image loading until each image scrolls into the user's viewport, leveraging the browser-native Intersection Observer API. It is an excellent starting point for developers who want to reduce initial page load times, lower bandwidth consumption, and improve Core Web Vitals scores without relying on heavyweight third-party libraries.

The technique is particularly valuable for portfolio sites, e-commerce product grids, or any content-heavy page where dozens of images appear below the fold. To reproduce it, paste the prompt into a capable code-generation model such as GPT-4o or Claude, then optionally add constraints like a specific framework (vanilla JS, React, or Vue), a fade-in animation style, or a placeholder skeleton design. The resulting code can serve as a production-ready foundation or a teaching reference for understanding modern browser observation APIs.