Smooth loader

This package allows you to lazy load your images using IntersectionObserver technology. It supports loading background images as well as the regular images with img tag.

📄 Description

Smooth loader allows you smoothly lazy load images and background images. Lazy Loading defers the loading of an image that is not needed on the page immediately. An image, not visible to the user when the page loads, is loaded later when the user scrolls and the image actually becomes visible. If the user never scrolls, an image that is not visible to the user never gets loaded.

This package is a MUST-HAVE for every website containing multiple images on the page. It's surely the best lazy loading package on NPM that you can configure to your own needs.

🎁 Features

  • ✅ Written in TypeScript;
  • ✅ Very small package;
  • ✅ Loads images with IMG tag and backgrounds;
  • ✅ Loads images with a smooth fade in animation;
  • ✅ Configurable;

✍️ Usage

To make image or element Lazy loaded, replace src attribute with data-src on image element, and add data-src attribute to elements that have background image that you want to lazy load.

  • Add smooth-loader css class to each image or element that you want or specify your own selector for images instead of smooth-loader.
  • Call smoothLoader() function when you want to lazy load images.
// with .smooth-loader selector

// with custom string selector

// with custom elements
const myImages = document.querySelectorAll<HTMLImageElement>('img')

Note, that lazy loading works only when your elements are already in the DOM. Meaning, if images are loaded after the smoothLoader was executed, lazy loading will not work.

<!-- Regular image -->
<img data-src="./images/me.png" class="smooth-loader">

<!-- Background image -->
<div data-src="./images/we.png" class="smooth-loader my-bg-image"></div>

🚀 Quick Start

# npm
npm i smooth-loader

# yarn
yarn add smooth-loader
import smoothLoader from 'smooth-loader'