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:

• Preloader Demo
• URL Preloader Demo

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.

myPreloader.load()
myLoader.load()

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
    
});

Changelog:

12/05/2018

• CustomEvent polyfill