Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

lozad

Package Overview
Dependencies
Maintainers
1
Versions
24
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

lozad

A light-weight JS library to lazy load any HTML element such as images, ads, videos etc.

  • 1.0.8
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
31K
increased by0.56%
Maintainers
1
Weekly downloads
 
Created
Source

Lozad.js npm version Build Status

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

lozad.js lazy loading javascript library

Lozad.js:

  • lazy loads elements performantly using pure JavaScript,
  • is a light-weight library, just 535 bytes minified & gzipped,
  • has NO DEPENDENCIES :)
  • allows lazy loading of dynamically added elements as well,
  • supports responsive images and background images

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

Table of Contents

Yet another Lazy Loading JavaScript library, why?

Existing lazy loading libraries hook up to 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.

Install

# You can install lozad with npm
$ npm install --save lozad

# Alternatively you can use Yarn.
$ yarn add lozad

# Another option is to use Bower.
$ bower install lozad

Then with a module bundler like rollup or webpack, use as you would anything else:

// using ES6 modules
import lozad from 'lozad'

// using CommonJS modules
var lozad = require('lozad')

Or load via CDN and include in the head tag of your page.

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lozad/dist/lozad.js"></script>

or

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js"></script>

When loading from CDN, you can find the library on window.lozad.

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:

const observer = lozad(); // lazy loads elements with default selector as '.lozad'
observer.observe();

or with custom options:

const observer = lozad('.lozad', {
    rootMargin: '10px 0px', // syntax similar to that of CSS Margin
    threshold: 0.1 // ratio of element convergence
});
observer.observe();

Reference:

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

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

        // Custom implementation to load an element
        // e.g. el.src = el.getAttribute('data-src');
    }
});

If you want to lazy load dynamically added elements:

const observer = lozad();
observer.observe();

// ... code to dynamically add elements
observer.observe(); // observes newly added elements as well

for use with responsive images

<!-- responsive image example -->
<img class="lozad" data-src="image.png" data-srcset="image.png 1000w, image-2x.png 2000w" />

for use with background images

<!-- background image example -->
<div class="lozad" data-background-image="image.png">
</div>

If you want to load the images before they appear:

const observer = lozad();
observer.observe();

const coolImage = document.querySelector('.image-to-load-first')
// ... trigger the load of a image before it appears on the viewport
observer.triggerLoad(coolImage);

Browser Support

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

FAQs

Checkout the FAQ Wiki for some common gotchas to be aware of while using lozad.js

Contribute

Interested in contributing features and fixes?

Read more on contributing.

Changelog

See the Changelog

License

MIT © Apoorv Saxena

Keywords

FAQs

Package last updated on 13 Oct 2017

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc