Web Preloader & Lazy Loader Library – Loader

Category: Javascript , Loading | December 5, 2018
Author:memob0x
Views Total:1,046 views
Official Page:Go to website
Last Update:December 5, 2018
License:MIT

Preview:

Web Preloader & Lazy Loader Library – Loader

Description:

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.

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

You Might Be Interested In:


Leave a Reply