Using JQuery Asynchronous Image Loader with preloader on resized images

Sunday November 04, 2012 ()

JQuery Asynchronous Image Loader (JAIL) is a jQuery plugin that lazy load images making your page load faster. It works best with a preloader image that is shown while the main image is not yet fully loaded. You can get JAIL from their github page here https://github.com/sebarmeli/JAIL .

This blog shows you how we used this plugin on resized images with a preloader. By resize, we mean using the height/weight attribute of an <img/> element and still use an unresized preloader.

Here is the basic use of this plugin.

<html>
    <head>
        <title>Demo</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <!-- JQuery -->
        <script type="text/javascript"
                src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js">
        </script>

        <!-- JAIL -->
        <script type="text/javascript" src="/kauswagan/js/jail.js"></script>        
        <script type="text/javascript">
            
            $(function(){
                $('img.storm').jail();
            });
            
        </script> 

    </head>

    <body>
        <div>
            <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" />

        </div> 
    </body>
</html>

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.

<html>
    <head>
        <title>Demo</title>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <!-- JQuery -->
        <script type="text/javascript"
                src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js">
        </script>
        
        <!-- JAIL called with a callback function that hides
             the overlay when image is fully loaded.
        -->
        <script type="text/javascript" src="/kauswagan/js/jail.js"></script>
        <script type="text/javascript">
            $(function(){
                $('img.storm').jail({callback : (function(){
                        $('div.overlay_prg').hide();})
                });
            });
            
            
        </script> 
        
        
        <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;
            }            
        </style>        
    </head>

    <body>
        <div class="main_image">
            <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" />
            <div class="overlay_prg">
                <img src="/kauswagan/images/prog.gif" border="0" width="20" />
            </div>
        </div>  

    </body>
</html>

Please visit JAIL github site for more options on using the plugin.

That's it Good Luck.


3,431

Comments (Using JQuery Asynchronous Image Loader with preloader on resized images )