Skip to content

kr-js/lozad.js

master
Switch branches/tags
Code
This branch is 216 commits behind ApoorvSaxena:master.
Contribute

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Lozad npm version

Advanced performant Lazy Loader using Intersection Observer API


lozad.js lazy loading javascript library

  • is a light-weight library, just 569 bytes minified & gzipped,
  • has NO DEPENDENCIES :)
  • lazy loads elements performantly using pure JavaScript.

It is written with an aim to lazy load images, ads, videos or any other element using the recently added Intersection Observer API with tremendous performance benefits.

Yet another Lazy Loading JavaScript library, why?

Existing lazy loading libraries hook up the scroll event or use a periodic timer and call getBoundingClientRect() on elements that need to be lazy loaded. This approach, however, is painfully slow as each call to getBoundingClientRect() forces the browser to re-layout the entire page and will introduce considerable jank to your website.

Making this more efficient and performant is what IntersectionObserver is designed for, and it’s landed in Chrome 51. IntersectionObservers let you know when an observed element enters or exits the browser’s viewport.

Demo

Get Started

Get the library using one of the following ways:

  1. GitHub

Full build

  1. Yarn : yarn add lozad

  2. Bower : bower install lozad

  3. npm: npm install --save lozad

  4. CDN: https://cdn.jsdelivr.net/npm/lozad

Now include the library in the HEAD tag of your page:

">
<script type="text/javascript" src="lozad.js"></script>

or

">
<script type="text/javascript" src="lozad.min.js"></script>

Note: lozad.js supports AMD and commonJS module pattern out of the box.

Usage

In HTML, add an identifier to the element (default selector identified is lozad class):

<img class="lozad" data-src="image.png" />

All you need to do now is just instantiate Lozad as follows:

new Lozad(); // lazy loads elements with selector as '.lozad'

or with custom options:

new Lozad({
    selector: '.lozad', // for identification of elements to lazy load
    rootMargin: '10px 0px', // syntax similar to that of CSS Margin
    threshold: 0.1 // ratio of image convergence
})

Reference:

or if you want to give custom function definition to load element:

var lozad = new Lozad();

lozad.load = function(el) {
	console.log('loading element');

	// Custom implementation to load an element
	// e.g. el.src = el.dataset.src;
}

If you want to lazy load dynamically added elements:

var lozad = new Lozad();

// ... code to dynamically add elements
lozad.activate(); // observes newly added elements as well

Browser Support

Available in latest browsers. If browser support is not available, then make use of this polyfill.

Contributing

Interested in contributing features and fixes?

Read more on contributing.

Changelog

See the Changelog

License

Copyright (c) 2017 Apoorv Saxena, https://apoorv.pro Licensed under the MIT license.

About

Highly performant, light ~0.5kb and configurable lazy loader in pure JS with no dependencies for images, iframes and more

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 100.0%