💤 Novicell Lazyload
Written in pure Vanilla JS, depends on lazysizes and some kind of serverside image processor as the imageprocessor.net. It ships with examples for easy implementation with the novicell-frontend setup.
Install with npm
npm install novicell-lazyload@next --save
npm i novicell-lazyload@next
;;const lazy =includeWebp: true // optional;document;window;
includeWebp: true/false Default true. Optional, but if it's set to true, Novicell-lazyload will still check if the client's browser supports WebP first.
windowlazySizesConfig =useWebp: true // Boolean (defaults to true). If true is used it will still check if browser supports WebP format and then add it
This script lazyloads by swapping the
data-srcset to an actual
For all implementations you should have a
data-query-obj on the image. Everything inside the data-query-obj is general settings that is applied on every src in the srcset as a querystring".
For extra plugins and complete feature list, please reference the lazysizes documentation.
Images with fixed sizes (lazyload)
For images with fixed sizes we recommend using a specific srcset, as this is the fastest.
Images with variable sizes (lazyload-measure)
For images with variable sizes, eg. a full width banner with a fixed height, or just an image added in the CMS inside a random grid column, we recommend the "measure"-feature.
This feature will get the size of the parent element, and add it as query strings for this image.
Using height ratio (or auto height)
If you just want auto height you can add the attribute ´data-height-ratio="0"´ You can also pass a height-ratio, this will set the size accordingly.
Useful height ratios:
0: Auto height
0.5: Half height as width
0.5625: 16:9 format
0.625: 16:10 format
1: Square image
2: Twice height as width
Background images (lazyload-bg)
This uses the "measure"-feature only adding the image as a background image on the parent element, instead of an actual
For extending the component please reference the Novicell wiki page 🕮.