Lazy loading defers image downloads until each item is about to enter the viewport, so visitors only pay the bandwidth cost for what they actually scroll to. This shortens initial page load, reduces data usage on mobile, and improves Core Web Vitals scores on Gallery-heavy pages.
Location Gallery Settings → Performance → Lazy Loading
How Lazy Loading Works #
When lazy loading is enabled, FotoGrids combines two browser mechanisms so images stay out of the network queue until they are needed.
The first is the browser-native loading="lazy" attribute, which FotoGrids writes onto every gallery <img> element along with decoding="async". Modern browsers use this attribute to skip the download for images that are far below the fold, and to decode the image off the main thread once it does load.
The second is an IntersectionObserver layer that FotoGrids attaches in the frontend bundle. The observer watches every lazy item in the Gallery and, the moment each one crosses the viewport boundary, adds a fotogrids-lazy-loaded class to it. That class drives a built-in opacity transition, so items fade in smoothly as they appear rather than popping in.
The two mechanisms are complementary: native lazy loading does the heavy lifting at the network level, and the observer handles the visual transition and works as a polyfill on browsers that do not support loading="lazy".
FotoGrids marks every Gallery item as lazy. Browsers then decide for themselves which items are close enough to the viewport to download immediately, so items above the fold still appear instantly while items far below are deferred until the visitor scrolls toward them.
Settings #
Enable Lazy Loading
| Setting | Enable Lazy Loading |
| Options | On Off |
| Default | On |
Turns lazy loading on or off for this Gallery. When on, FotoGrids adds loading="lazy" and decoding="async" to each item’s <img> tag and attaches the IntersectionObserver layer for the fade-in transition. When off, every item is queued for download as soon as the page starts to render, regardless of where it sits on the page.
Leave this on for almost every Gallery. The only reason to turn it off is if a separate performance or image-optimisation plugin is already managing lazy loading site-wide and you want to avoid duplicate handling on the same <img> tags.
Behaviour with Pagination #
When a Gallery uses Endless Scroll or a Load More button, lazy loading continues to apply to each new batch of items. FotoGrids re-runs the IntersectionObserver on the freshly inserted markup, so items in the next page download only as the visitor scrolls toward them, in exactly the same way as items on the first page.
Browser Support #
Native loading="lazy" is supported in every current browser. On older browsers that do not recognise the attribute, the IntersectionObserver layer alone defers visibility-tied work and adds the fade-in class as items come into view. On browsers without IntersectionObserver either, FotoGrids falls back to the default browser behaviour: every image is downloaded immediately, the same way it would behave with lazy loading off, and the gallery remains fully functional.
When to Turn Lazy Loading Off #
There are only a handful of cases where disabling lazy loading makes sense:
- Another plugin (for example, a dedicated image-optimisation or CDN plugin) is already adding
loading="lazy"and you want a single source of truth on the<img>tags. - The Gallery sits entirely above the fold on every page it appears on, so deferred loading provides no real benefit and the fade-in transition is not desired.
- A specific theme or page builder integration relies on every image being available in the DOM before any lazy-loading attribute is added.
In all other cases, keep lazy loading on. The savings on bandwidth and initial render time are significant on any Gallery with more than a screen’s worth of items.
