lazy-loader

Lazy load images using Intersection Observer.

Installation

# NPM
npm i @alessandrodias/lazy-loader

# YARN
yarn add @alessandrodias/lazy-loader

Usage:

Replace the src attribute from images with the data-lazy-src attribute

<img data-lazy-src="path/to/image.jpg">

Instantiate the class to lazy load the images

import LazyLoader from '@alessandrodias/lazy-loader/src/lazy-loader';

new LazyLoader({
  '100px 0px',
  0.5,
  yourCallbackFunction
});

Settings

option	type	default
rootMargin	CSS margin property, e.g. "50px 0px"	0
threshold	percentage of the target's visibility	null
callback	function	null

How it works?

The Intersection Observer will observe each image with the attribute data-lazy-src and whenever they are about to appear on screen, it will set the src attribute with the value from the data-lazy-src attribute.

It also works for background images. But in this case, you must set the data-lazy-src attribute to the element that will have the background-image applied to.