How to Pre / Post Load Assets like Images, CSS, JS files using Preload JS liberary

In this post, we will discuss How to load assets like images, CSS files, js files and another type of files in lazy load manner using Preload JS library. Using Preload we can check how much data is loaded and also check progress in percentage.

Preload Js can be used in a number of scenarios like if we have a number of heavy images then we can show a loader when images are loading in the background, then after the all images are loaded we can show success message or hide loader.

If our website is having a number of assets due to which it is taking time then we can move that data to Preload js which will show progress while loading or we can load that data after the website is loaded for user interactions.

Let’s make a demo using Preload JS library, where we have some images that are loaded one by one with the progress shown real-time.

You can check more examples on official site here

First, add PreloadJS in project

Then we will add some HTML div’s with respective IDs

After that, we will add JS code to load Image assets using the loadFile method, also there are callback methods to check the progress of loaded content.

Get DOM instance by using getElementById method

get instance of createjs in a variable

Add event listeners for “progress”, “complete” and “fileload” callbacks

Above events “progress” and “complete” will be called for each loadFile method, then “fileload” method will be called after all files are loaded completely.

For styling the progress bar add following CSS styling

After adding the above content, the final HTML will look like this

See image below to check how this demo will work.

You can use this powerful library in any way you want this demo just explains an example of one way how it can be used with heavy image data.

Leave a Reply

Your email address will not be published. Required fields are marked *