Performant Element lazy Load Library – Lozad

Category: Javascript , Loading , Recommended | September 19, 2018
Author: ApoorvSaxena
Views Total: 1,132
Official Page: Go to website
Last Update: September 19, 2018
License: MIT

Preview:

Performant Element lazy Load Library – Lozad

Description:

Lozad is a small (569 bytes minified & gzipped), highly performant JavaScript library used to lazy load any html elements (e.g. images, videos, etc.) using Intersection Observer Web API.

Installation:

# Yarn
$ yarn add lozad

# NPM
$ npm install lozad --save

# Bower
$ bower install lozad

How to use it:

Include the minified version of the Lozad.js on the html page.

<script src="lozad.min.js"></script>

Or include the JavaScript file from CDN:

<script src="//cdn.jsdelivr.net/npm/lozad"></script>

Create a new Lozad object and specify the target element to lazy load.

new Lozad({
    selectorClass: 'lozad'
})

More configuration options.

new Lozad({
    selectorClass: 'lozad',
    rootMargin: '10px 0px', // CSS Margin
    threshold: 0.1 // ratio of image convergence
})

Changelog:

09/19/2018

  • Fixed load() is not triggered sometimes

v1.6.0 (09/16/2018)

  • FIX: throwing an error during SSR
  • Added Intersection observer options root

v1.5.0 (07/17/2018)

  • alt attribute on lazy-loaded <picture> tags
  • Support toggling class

Leave a Reply