Here is the basic use of this plugin. 



<pre class="brush: xml">
&lt;html>
 &lt;head>
 &lt;title>Demo&lt;/title>
 &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

 &lt;!-- JQuery -->
 &lt;script type="text/javascript"
 src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js">
 &lt;/script>

 &lt;!-- JAIL -->
 &lt;script type="text/javascript" src="/kauswagan/js/jail.js">&lt;/script> 
 &lt;script type="text/javascript">
 
 $(function(){
 $('img.storm').jail();
 });
 
 &lt;/script> 

 &lt;/head>

 &lt;body>
 &lt;div>
 &lt;img class="storm" 
 data-src="http://www.ssd.noaa.gov/PS/TROP/gglcontent/wpac.gif"
 border="0" width="500" height="333"
 src="/kauswagan/images/blank.gif" />

 &lt;/div> 
 &lt;/body>
&lt;/html>
</pre>



The src attribute is the image placeholder that also serves as a proloader. data-src is the actual image. This src resizes to the width/height attribute which works well if you are using the src attribute as a placeholder. As a preloader your preloader image is streched to fill the image area.



In our application we wanted to keep the size of the preloader. To have this effect, we used, a transparent tiny image for the placeholder and add the preloader as an overlay. We also defined a callback function, which is available as an option parameter to this plugin, to hide the overlay after the main image is loaded completely. 



Here is our solution.



<pre class="brush: xml">
&lt;html>
 &lt;head>
 &lt;title>Demo&lt;/title>

 &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 &lt;!-- JQuery -->
 &lt;script type="text/javascript"
 src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js">
 &lt;/script>
 
 &lt;!-- JAIL called with a callback function that hides
 the overlay when image is fully loaded.
 -->
 &lt;script type="text/javascript" src="/kauswagan/js/jail.js">&lt;/script>
 &lt;script type="text/javascript">
 $(function(){
 $('img.storm').jail({callback : (function(){
 $('div.overlay_prg').hide();})
 });
 });
 
 
 &lt;/script> 
 
 
 &lt;style type="text/css">
 /* The container div */
 div.main_image{
 position:relative;
 display:block;
 float:left;
 border:0px;
 }
 /* Overlay style */
 div.overlay_prg {
 position:absolute;
 left:45%;
 top: 0px;
 margin-top:45%;
 border: 0px;
 } 
 &lt;/style> 
 &lt;/head>

 &lt;body>
 &lt;div class="main_image">
 &lt;img class="storm" 
 data-src="http://www.ssd.noaa.gov/PS/TROP/gglcontent/wpac.gif"
 border="0"
 width="500" height="333"
 src="/kauswagan/images/blank.png" />
 &lt;div class="overlay_prg">
 &lt;img src="/kauswagan/images/prog.gif" border="0" width="20" />
 &lt;/div>
 &lt;/div> 

 &lt;/body>
&lt;/html>
</pre>



Please visit JAIL github site for more options on using the plugin. 



That's it Good Luck.

Using JQuery Asynchronous Image Loader with preloader on resized images