Skip to content

chenyuan8059/lozad.js

master
Switch branches/tags
Code
This branch is 232 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 Lazy Loader using Intersection Observer API


lozad.js is a light-weight library to lazy load elements using 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.

Demo

View demo

Lazy loading images javascript library

Installation

lozad.js is just 569 bytes minified & gzipped. It has NO DEPENDENCIES :).

  • Yarn: yarn add lozad
  • NPM: npm install lozad
  • Bower: bower install lozad
  • Download zip

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

Usage

new Lozad(); // lazy loads images with selector class as 'lozad'

with custom options:

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

Reference:

give custom function definition to load element:

// Initialize Lozad
let lozad = new Lozad();

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

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

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

Advanced Lazy Loader using Intersection Observer API

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 100.0%