Minimal Fullscreen Image Preloader – Preloader.js

Category: Javascript , Loading | July 27, 2015
Author: yhb241
Views Total: 2,457 views
Official Page: Go to website
Last Update: July 27, 2015
License: MIT


Minimal Fullscreen Image Preloader – Preloader.js


Preloader.js is a super lightweight JavaScript library that displays a fullscreen overlay with custom loading text until all the specified images have been loaded.

How to use it:

Create the html for the image preloader.

<div class="preloader" id="preloader">

Load the preloader.js script in the document.

<script src="js/preloader.js"></script>

Create an array of images you want to preload and then initialize the image preloader.

'use strict';
window.addEventListener('DOMContentLoaded', function(){
    id: 'preloader',
    imgUrls: ['1.jpg', '2.jpg', '3.jpg'],
    onInit: function(){
      // do something
    onRemove: function(){
      // do something
}, false);

You Might Be Interested In:

Leave a Reply