Lazy Loading
Images fade in as they enter the viewport — shimmer placeholder, IntersectionObserver, smooth reveal.
How it works
LazyLoad.js uses IntersectionObserver to watch
every .lazy-img element. When an image enters the viewport,
data-src is swapped to src and the image
gets the class is-loaded, triggering a CSS fade-in.
The .lazy-img-wrap wrapper shows a shimmer until then.
Deferred data-src
Image is not requested until it enters the viewport — use a 1×1 transparent
GIF as the placeholder src to avoid broken-image icons.
<div class="lazy-img-wrap">
<img class="lazy-img"
data-src="/img/photo.jpg"
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
alt="Description"
width="800" height="600">
</div>
Native lazy + fade
When you just want the fade-in without deferring the request — omit
data-src and add loading="lazy". The browser
fetches the image when near the viewport; JS adds the fade.
<div class="lazy-img-wrap">
<img class="lazy-img"
loading="lazy"
src="/img/photo.jpg"
alt="Description">
</div>
On this page
Loaded 0 of 18 images
