Hit enter after type your search item

A jQuery / CSS3 image pre loader plug-in with 3 demos

The image pre-loader plug-in

The preloader for images can be used for loading the images on backward while users will see this “processing” loader in the meanwhile. This light-weight plug-in is particularly useful if you have a number of heavy images to load and you want users not to leave the web page.

The jquery_img_preloader is tiny in size, just 2Kb JS file that you may place in the <body> section of the webpage. It also uses CSS 3 properties that are placed in the <style> section. See the following demos along with how you may set up this plug-in for your web project.

A demo of image preloader

In the demo, three images are referred from different sources. The pre-loader will keep on showing until all images are downloaded. For that, you have to place the source images in the div with id=content and specify image sources by using data-src attribute in the image tag. See the demonstration online.

jQuery pre loader image

See online demo and code

For setting up this plug-in, simply place the JS file (jquery.img_preloader.js) above the </body> tag after jQuery file. You may download this file from the plug-in page from GitHub here or view source the demo page and save the file in your system

A demo of specifying array of images in jQuery

You may also pre-load the images by using an array in the imgPreloader.preLoadURLs method of plug-in. See the following demo where the same set of images are pre-loaded in an array:

jQuery pre loader image2

See online demo and code

In that case, the images are preloaded in the backward and content in the <div> will display after these are loaded. However, images won’t display unless you use it explicitly. The following script is used for this demo:


A demo of changing colors of circles

By modifying a few CSS 3 properties, you may change the colors of circles of preloader. For that, simply change the load5 in CSS which is placed in the <style> section. The box-shadow for different percentage deals with the colors. Have a look at the demo where I changed the color to red and green for different small circles of pre loader:

jQuery pre loader colors

See online demo and code

Similarly, you may change other properties to match loader with the rest of your design.

This div height required for enabling the sticky sidebar