Image Preload Plugin For jQuery Library | lsPreloader

lsPreloader is a simple and lightweight jQuery plugin that creates a preloader to indicate the progress of images downloaded from your website. Supports local and external images.

preload jquery, jquery preloader library, how to create preloader in jquery, preload images javascript

How to make use of it:

1. Load the jQuery library and jQuery lsPreloader plugin.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/lsPreloader.js"></script>

2. Wrap the images you want to preload into a content item.

<div id="wrap">
  <img src="img/1.jpg" walt="Image Alt">
  <img src="img/2.jpg" walt="Image Alt">
  <img src="img/3.jpg" walt="Image Alt">
</div>

3. Call the plugin on the container.

$("#wrap").lsPreloader({
// OPTIONS HERE
});

4. Set up your image preloader.

$("#wrap").lsPreloader({

// background color
backgroundColor:  "#000", 

// background image
backgroundImage:  "",   

// repeat | no-repeat | repeat-x | repeat-y
backgroundRepeat: "repeat", 

// display your logo     
logoImage:      "",   

// display progress bar
progressShow:   true, 

// progress bar color
progressColor:    "#FFF",

// progress bar height
progressHeight:   "10px", 

// top | center | bottom
progressPosition: "bottom", 

// display percentage
percentShow:    true,      

// font family
percentFontFamily:  "Verdana, Geneva, sans-serif", 

// font size
percentFontSize:  "50px",  

// choose an animation type
// fade | hide | slideUp | slideDown | slideLeft | slideRight  
animationComplete:  "fade",

// minimum time of execution in seconds
minimumTime:    .5,          

// callbacks       
onStart:      function(){}, 
onComplete:     function(){}

});

Lightweight jQuery Image Preloading, lsPreloader Plugin/Github


See Demo And Download

Official Website(silvaleonardo): Click Here

This superior jQuery/javascript plugin is developed by silvaleonardo. For extra advanced usage, please go to the official website.

Share