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

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