Back

LazyImage

Image Grid (scroll down to trigger loads)

Images below the fold load on-demand via IntersectionObserver with a 200px root margin.

Lazy loaded image
Lazy loaded image
Lazy loaded image
Lazy loaded image
Lazy loaded image
Lazy loaded image

Usage

// Image only loads when it scrolls into view (+ 200px ahead).
// A pulsing placeholder is shown until the image loads.
@media.LazyImage(media.LazyImageProps{
    Src:    "/images/hero.jpg",
    Alt:    "Hero image",
    Width:  "100%",
    Height: "400px",
})