pigro.js

A small lazy loader for images, videos etc. built using the intersection observer API. To learn more about the API and how supported it is refer to: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

Installation

# Install using Yarn.
$ yarn add pigro

# Install using npm.
$ npm install pigro

Usage

In your HTML:

<img class="pigro" data-src="lazy-image.jpg" />

In your JavaScript:

import pigro from 'pigro';
const lazyLoader = pigro(); // initialize new loader
lazyLoader.watch(); // watch elements to lazyload

By default Pigro will use the selector .pigro to determine which elements to lazy load and the following configuration:

defaultSettings = {
  rootMargin: '0px',
  threshold: 0
};

It is possible to create a new watcher with a custom selector and configuration:

const lazyLoader = pigro('.customLazy', {
  rootMargin: '3px',
  threshold: 1.0
});