https://github.com/Novicell/novicell-lazyload

Small image lazyloading library in pure vanilla javascript, highly customizable
https://github.com/Novicell/novicell-lazyload

images lazyload lazysizes optimization responsive

Last synced: about 1 year ago
JSON representation

Small image lazyloading library in pure vanilla javascript, highly customizable

• Host: GitHub
• URL: https://github.com/Novicell/novicell-lazyload
• Owner: Novicell
• License: mit
• Created: 2017-10-27T10:58:36.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2023-06-06T02:54:44.000Z (about 3 years ago)
• Last Synced: 2024-11-13T05:12:36.664Z (over 1 year ago)
• Topics: images, lazyload, lazysizes, optimization, responsive
• Language: JavaScript
• Homepage:
• Size: 231 KB
• Stars: 2
• Watchers: 4
• Forks: 2
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# 💤 Novicell Lazyload

**Image lazyloading script in vanilla javascript**

![npm package](https://img.shields.io/npm/v/novicell-lazyload.svg?colorB=c12127)

![npm downloads](https://img.shields.io/npm/dt/novicell-lazyload.svg?label=npm%20downloads&colorB=blue)

![vulnerabilities](https://img.shields.io/snyk/vulnerabilities/npm/novicell-lazyload.svg)

## Usage

Written in pure Vanilla JS, depends on [lazysizes](https://github.com/aFarkas/lazysizes/) and some kind of serverside image processor as the [imageprocessor.net](http://imageprocessor.org/imageprocessor-web/imageprocessingmodule/). It ships with examples for easy implementation with the [novicell-frontend setup](https://github.com/Novicell/novicell-frontend).

### Install with npm

```sh

npm install novicell-lazyload --save

```

Or simply:

```sh

npm i novicell-lazyload

```

## Setup

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

```javascript

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

```js

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](https://github.com/aFarkas/lazysizes/).

### Images with fixed sizes (lazyload)

For images with fixed sizes we recommend using a specific srcset, as this is the fastest.

```html



```

### 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.

```html



```

### 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"}'`.

```html



```

### 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 ``-tag.

```html



```

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

```