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">
  <div>Loading...</div>
</div>

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(){
  preloader.init({
    id: 'preloader',
    imgUrls: ['1.jpg', '2.jpg', '3.jpg'],
    onInit: function(){
      // do something
    },
    onRemove: function(){
      // do something
    }
  });
}, false);