Lazy Loading Images
Load images only when they appear.
The Lazy Loading Idea
Lazy loading defers downloading images until they are about to scroll into view. This saves bandwidth and speeds up the initial page load, especially for long, image-heavy pages.
Storing the Real URL
The trick: do not put the real image URL in src initially. Store it in a data-src attribute so the browser does not download it yet.
// Markup pattern:
// <img data-src="photo-large.jpg" alt="Scenery">
// The browser will not fetch anything until we set src.All lessons in this course
- Observing Element Visibility
- Lazy Loading Images
- Infinite Scrolling
- Scroll-Triggered Animations