Fork me on GitHub
Post Format

jQuery Image Preload Plugin: Smart Preloader

Smart Preloader is a small jQuery image preloading plugin that helps you preload all the required images. Smart perloader plugin takes an array of images and notifies via “oneachimageload” on each image load, and once all the images are loaded “onloadall” callback functions is called. Both the “oneachimageload” and “onloadall” functions are passed as parameters to Smart Preloader initializer function.

jquery image preload plugin smart preloader

Smart Preloader parameters
  • images: an array of images to be preloaded
  • oneachimageload: callback function to be called on each image load
  • onloadall: callback function to b called when all the images are loaded
Using Smart Preloader

In your HTML file add the following in the head section.

  • Add a reference to latest jQuery script
  • Add a reference to smartpreload.js file

Now add the following code to your HTML file’s head section.

   <script type="text/javascript">
         $(document).ready(function() :
        $(document).smartpreload({ images: ['comma separated list of image paths'], oneachimageload: onimageload, onloadall: onallimagesloaded });
            
            function onimageload(src)
            {
                //write your code here
                //alert(src);
            }
            function onallimagesloaded()
            {
                //write your code here
            }
        });
    </script>

Here is the complete source code for a demonstration of image preloading. In this demo we are loading twelve images, initially when the page loads it displays an overlay and the place holders for images and on each image load the place holder is replaced with actual image, once all the images are loaded the overlay is also removed.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Smart Preload jQuery Plugin</title>

    <script src="jquery-1.4.4.min.js" type="text/javascript"></script>

    <script src="smartpreload.js" type="text/javascript"></script>

    <script type="text/javascript">
        var counter = 0;
        $(document).ready(function() {
            $('#overlay').css('z-index', '10000');

            $('#demo div img').attr('src', 'loading.gif').addClass('loading');
            $('#overlay img').css("position", "absolute");
            $('#overlay img').css("top", $(window).height() / 2 + $(window).scrollTop() + "px");
            $('#overlay img').css("left", $(window).width() / 2 + $(window).scrollLeft() + "px");

            $(document).smartpreload({ images: ['http://www.egrappler.com/contents/smartpreload/demo/images/super_nova.jpg', 'http://www.egrappler.com/contents/smartpreload/demo/images/pacific-ocean-from-space.jpg', 'http://www.egrappler.com/contents/smartpreload/demo/images/dark_sun_dawn.jpg', 'http://www.egrappler.com/contents/smartpreload/demo/images/abstract_lake.jpg', 'http://www.egrappler.com/contents/smartpreload/demo/images/abstract_brushes.jpg', 'http://www.egrappler.com/contents/smartpreload/demo/images/earth.jpg', 'http://www.egrappler.com/contents/smartpreload/demo/images/moon-arc.jpg', 'http://www.egrappler.com/contents/smartpreload/demo/images/moon-day.jpg','http://www.egrappler.com/contents/smartpreload/demo/images/saguaroMoon_seip.jpg','http://www.egrappler.com/contents/smartpreload/demo/images/solar-system.jpg','http://www.egrappler.com/contents/smartpreload/demo/images/space.jpg','http://www.egrappler.com/contents/smartpreload/demo/images/blackhole.jpg'], oneachimageload: function(src) {
                ++counter;
                if (counter == 1) preview(src);
                $('#' + counter).attr('src', src).css('cursor', 'pointer').removeClass('loading').addClass('normal').click(function() {
                    preview(src);
                });
            }, onloadall: function() {
                $('#overlay').css('display', 'none');
            }
            });

            function preview(src) {

                var img = $('<img/>').attr('src', src).css('width', '100%').css('height', '100%').css('display', 'none');
                $('#preview').find('img').remove();
                $('#preview').append(img);
                img.fadeIn("5000", function() { img.css('border-radius', '8px').css('-moz-border-radius', '8px') });
            }

        });
    </script>

    <style type="text/css">
        body
        {
            background-color: #333333;
        }
        #demo
        {
            margin: auto;
            width: 560px;
            height: 420px;
            padding-top: 30px;
            border-radius: 8px;
            -moz-border-radius: 8px;
            background-color: #202020;
        }
        #demo #wrapper
        {
            width: 100%;
            height: 380px;
            background-color: #202020;
        }
        #demo div.container
        {
            float: left;
            width: 120px;
            height: 120px;
            padding: 4px;
            margin-top: 8px;
            margin-left: 10px;
            background-color: White;
            border-radius: 8px;
            -moz-border-radius: 8px;
        }
        #demo div img.normal
        {
            width: 120px;
            height: 120px;
            border-radius: 8px;
            -moz-border-radius: 8px;
        }
        #demo div img.loading
        {
            width: 24px;
            height: 24px;
        }
        #demo #preview
        {
            width: 90%;
            height: 300px;
            margin-left: 30px;
            margin-bottom: 30px;
            background-color: White;
            border-radius: 8px;
            -moz-border-radius: 8px;
        }
        #overlay
        {
            width: 100%;
            height: 100%;
            background-color: #fff;
            filter: alpha(opacity=60); /* CSS3 standard */
            opacity: 0.6;
            position: absolute;
        }
        #overlay img
        {
            position: absolute;
        }
        #overlay div p
        {
            color: black;
            font-weight: bold;
            font-family:Sans-Serif;
            font-size:1.0em;
            line-height:1.0em;
        }
        .clear
        {
            clear: both;
        }
    </style>
</head>
<body>
    <div id="overlay">
        <div style="text-align:left;margin:auto;width:620px;padding-top:20px;">
            <p>
                This demo shows the use of preload pugin, it utilizes following callback functions</p>
            <p>
                1) oneachimageload</p>
            <p>
                2) onloadall</p>
            <p>
                See when each image is loaded the image place holder displays the image.
            </p>
            <p>
                Also when all the images are loaded overlay is removed via "onloadall" callback
                function.</p>
        </div>
    </div>
    <div id="demo">
        <div id="wrapper">
            <div class="container">
                <img id="1" />
                <div class="clear">
                </div>
            </div>
            <div class="container">
                <img id="2" />
                <div class="clear">
                </div>
            </div>
            <div class="container">
                <img id="3" />
                <div class="clear">
                </div>
            </div>
            <div class="container">
                <img id="4" />
                <div class="clear">
                </div>
            </div>
            <div class="container">
                <img id="5" />
                <div class="clear">
                </div>
            </div>
            <div class="container">
                <img id="6" />
                <div class="clear">
                </div>
            </div>
            <div class="container">
                <img id="7" />
                <div class="clear">
                </div>
            </div>
            <div class="container">
                <img id="8" />
                <div class="clear">
                </div>
            </div>
             <div class="container">
                <img id="9" />
                <div class="clear">
                </div>
            </div>
             <div class="container">
                <img id="10" />
                <div class="clear">
                </div>
            </div>
             <div class="container">
                <img id="11" />
                <div class="clear">
                </div>
            </div>
             <div class="container">
                <img id="12" />
                <div class="clear">
                </div>
            </div>
        </div>
    </div>
</body>
</html>

No related posts.

11 comments

  1. Pingback: سلام دنیا! | نشریه مدیریت و کیفیت

  2. Pingback: 9 jQuery Preload Image Plugins | jQuery4u

  3. Pingback: trouver les dimensions des images avec jquery et javascript | TuniWebTricks

  4. Pingback: l'extracteur d'url en jquery et php à la façon de facebook est de retour version 2 | TuniWebTricks

  5. Having some trouble getting this to work in IE7..works beautifully in other browsers though. Any suggestions?

    Reply
    • Hi Andrew!

      Thanks for using my scripts. As far as IE7 is concerned i’ve tested the script in IE7 using IE Tester its working for me. Can you please tell me more specifically what’s going wrong ?

      Reply
  6. Thanks for the plugin. Can it be implemented with background images in css but i don’t know my way around jquery. Any solution for that?

    Reply
    • Well martthews you dont need to do anything special, images are images whether they are used in background in they are used as element, you simply need to pass the array of images that you want to preload. For example if your css contains a class like

      .myclass
      {
      background-image:url(‘http://www.mysite.com/images/bg.jpg’);
      }
      you just need to pass your image path to preload plugin, it will do the rest for you :) Actually it is the first request that is served from the actual location, subsequent request are served from browser’s cache.

      Reply
  7. Nice script over here. Seen the way it’s working and thought of implementing it with background images in css but i don’t know my way around jquery. Any solution for that?

    Reply

Leave a Reply

Required fields are marked *.


× six = 12