Minimal Fullscreen Image Preloader – Preloader.js

Category: Javascript , Loading | July 27, 2015
Views Total:2,847 views
Official Page:Go to website
Last Update:July 27, 2015


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