Web Preloader & Lazy Loader Library – Loader

Category: Javascript , Loading | December 5, 2018
Views Total:1,098 views
Official Page:Go to website
Last Update:December 5, 2018


Web Preloader & Lazy Loader Library – Loader


Loader is a powerful JavaScript library used to preload or lazy load ‘Heavy’ HTML elements on the webpage, such as images, audios, videos, iframes, and etc.

This is the rewritten version of the jQuery nite-preloader plugin that helps you implement the preload and lazy load functionalities without any dependencies.

More Demos:

How to use it:

Download and import the Loader’s files into the document.

<link rel="stylesheet"href="./assets/dist/lazyloader.css">
<script defer src="./assets/dist/lazyloader.js"></script>

Initialize the library as a preloader or lazy loader.

// preloader
const myPreloader = new Loader();
// lazy loader
const myLoader = new Loader({
      lazy: true

Define a collection of resources to preload or lazy load.

myPreloader.collection = document.querySelectorAll('img');
// or
myPreloader.collection = document.body;
// or
myPreloader.collection = 'image.jpg';
// or
myPreloader.collection = ['image.jpg', '1.mp3', '2.mp4'];

Start preloading or lazy loading.


Handle the loading progress.

myLoader.progress(resource => console.log(resource.element, 'appeared and loaded.'));

All default options.

new Loader({
    // default data attributes
    srcAttributes: {
      src: 'data-src',
      srcset: 'data-srcset'
    sizesAttributes: {
      sizes: 'data-sizes',
      media: 'data-media'
    // enable/disable background
    backgrounds: false,
    // for audio/video resources
    playthrough: false,
    // sequential load or not
    sequential: false



  • CustomEvent polyfill

You Might Be Interested In:

Leave a Reply