Simple Image Preloader With Callbacks – resloader

Preview:

Description:

resloader is a pure JavaScript library to preload an array of images (or image objects) with useful onStart, onProgress, and onComplete callback functions.

How to use it:

Download & Install the resloader library with NPM:

# NPM
$ npm install resloader --save

Import the resloader into your module.

// ES 6
import resloader from 'resloader';

Or directly include the resloader.js script on the webpage.

<script src="dist/resloader.js"></script>

Define the images to be preloaded.

const myData = [{
        name: images1,
        url: '1.jpg'
      },{
        name: images1,
        url: '2.jpg'
      },
      {
        name: images1,
        url: '3.jpg'
      },
      ...
]
// or
const myData = ['1.jpg', '2.jpg', '3.jpg', ...]

Initialize the resloader to preload the provided images on page load.

resloader({
  resources: myData
});

Callback functions available.

resloader({
  onStart: function(total){
    // ...
  },
  onProgress: function(currentIndex, total) {
    // ...
  },
  onComplete: function(total,result) {
    // ...
  },
});

Changelog:

08/01/2019

• refactor: format code & delete invalid images