💤 Novicell Lazyload

Image lazyloading script in vanilla javascript

Usage

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 --save

Or simply:

npm i novicell-lazyload

Setup

Import novicell-lazyload as a module in your javascript file that observes the images. Also add debounce from lodash.

import NovicellLazyLoad from '../js/lazy-images';
import debounce from 'lodash/debounce';

const lazy = new NovicellLazyLoad({
    includeWebp: true,
    includeRetina: true
});

document.addEventListener('lazybeforeunveil', function(event) {
    lazy.lazyLoad(event);
}, true);

window.addEventListener('resize', debounce(() => {
    lazy.checkImages();
}, 100), false);

Options

includeWebp: true/false Default true. Optional, when set to true, Novicell-lazyload will still check if the client's browser supports WebP.

includeRetina: true/false Default true. Optional, when set to true, Novicell-lazyload will check the devicePixelRatio and add required srcset by multiplying the height and width with the devicePixelRatio. When using lazyload-bg it will add the srcset with image-set in CSS.

Options

window.lazySizesConfig = {
    useWebp: true, // Boolean (defaults to true). If true is used it will still check if browser supports WebP format and then add it
    includeRetina: true // Boolean (defaults to true). If true is used it will check the devicePixelRatio and add required srcset by multiplying the height and width with the devicePixelRatio
}

Implementation

This script lazyloads by swapping the data-src or data-srcset to an actual src or srcset. For all implementations you should have a lazyload-class and 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".

NOTE: Add the format before the quality, for utilizing the quality feature.

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.

<img class="lazyload" data-src="/dist/images/test.jpg" alt="Cool image" data-query-obj='{"mode":"crop", "quality":"70", "center": "0.8,0.3"}'
data-srcset="/dist/images/test.jpg?width=1500&heightratio=0.6 1000w,
             /dist/images/test.jpg?width=900&heightratio=0.6 800w,
             /dist/images/test.jpg?width=400&heightratio=1 500w"/>

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.

<img class="lazyload lazyload-measure" data-src="/dist/images/test.jpg" alt="Cool image" data-query-obj='{"mode":"crop", "quality":"70", "center": "0.8,0.3"}'/>

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: Inherit height from parent 👨‍👦

0.5: Landscape image 🖼

0.5625: 16:9 format (great for video) 📺

0.625: 16:10 format 🖥

1: Square image 🔲

2: Portait image 📸

NOTE: If you want to keep the image original height, you can pass data-query-obj='{"height": "auto"}'.

<img class="lazyload lazyload-measure" data-src="/dist/images/test.jpg" alt="Cool image" data-height-ratio="0" data-query-obj='{"mode":"crop", "quality":"70", "center": "0.8,0.3"}' />

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 <img>-tag.

<img class="lazyload lazyload-measure lazyload-bg" data-src="/dist/images/test.jpg" alt="Cool image" data-query-obj='{"mode":"crop", "quality":"70", "center": "0.8,0.3"}'/>

Building and developing

Run the demo project

npm run dev

Build the package into dist folder

npm run build

Preview the production build

npm run preview