Create a Simple Image Preloader Jquery Plugin

26,11,2010 at 17:38 Yorum bırakın


Post Source

Download Source FilesSee the Demo

How often do you find that images in a website load gracefully; the kind where a loading icon first appears, and the image then fades in, once loaded? This technique can greatly boost the performance of your website. If you’re not already familiar with this method, you’re in luck! Today, we’ll create a preloader plugin for your projects. Intrigued? Let’s get started!

Step 1:
Setting Up Your Workspace

First, we are going to setup the project folder for this tutorial. We’ll need:

  • Our main HTML file
  • CSS folder for our stylesheet and loading icon ( in ‘i’ folder)
  • JS folder for jQuery and our plugin

Step 2:

We’re going to start off with the HTML code.

<DOCTYPE html>
<meta charset=utf-8" />
<title>Image Preloader</title>

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

<link rel="stylesheet" href="css/preloader.css" type="text/css" />



<div id="container">
    <h2>Preloader - Load images with style</h2>

    <ul id="gallery" class="clearfix">
        <li><p><a href="#"><img src="images/1.jpg" /></a></p></li>
        <li><p><a href="#"><img src="images/2.jpg" /></a></p> </li>
        <li><p><a href="#"><img src="images/3.jpg" /></a></p> </li>
        <li><p><a href="#"><img src="images/4.jpg" /></a></p></li>
        <li><p><a href="#"><img src="images/5.jpg" /></a></p> </li>
        <li><p><a href="#"><img src="images/6.jpg" /></a></p> </li>
        <li><p><a href="#"><img src="images/7.jpg" /></a></p> </li>
        <li><p><a href="#"><img src="images/8.jpg" /></a></p> </li>
        <li><p><a href="#"><img src="images/9.jpg" /></a></p> </li>


Nothing fancy here: just plain HTML code for a simple gallery. We have imported jQuery, our plugin jquery.preloader.js
(currently blank), and our preloader’s stylesheet. To finish up, we’ll add an unordered list, which will contain list items as images wrapped by an anchor tag (usually done in a website for opening a lightbox or linking to a site).

Note that the extra p
tag wrapping each anchor is used for the purpose of styling the image; they are not explicitly required.

Step 3:

Now, we’re going to create a preloader.css
stylesheet in the css
folder, and, inside that, create a subfolder i
in which we will keep our preloader icon.
have a nice collection of loading icons that you can choose from. Add the following code to your stylesheet:

* { margin:0; padding:0; }

body { background:url(i/bg.jpg); }

#container { width:960px; margin:0px auto; }

h2 { font-weight:100; text-shadow:#ffffff 1px 1px 0px; text-align:center; padding:20px; font-size:32px;  color:#555555; border-bottom:1px dashed #ccc; margin-bottom:30px;  font-family: Georgia, "Times New Roman", Times, serif ;  }

First, we have created a 960px
centered container, and have added a background to the page. Additionally, we’ve added some basic styling to the title ( h2
tag ).

Styling the Gallery

Next, we’ll style the gallery and, while we are at it, throw in some CSS3 goodness.

#gallery {

#gallery li {
border:1px solid #d7d7d7;
-webkit-box-shadow:1px 1px 6px #ddd;
-moz-box-shadow:1px 1px 6px #ddd;
box-shadow:1px 1px 6px #ddd;
margin:15px 56px;

#gallery li p {
border:1px solid #fff;

#gallery li a {

#gallery img {

At this point, our gallery should look like so:


Setting up the Preloader Class

Let’s create a preloader
class that will be responsible for showing the loading icon, while images are loading.

.preloader {
   background:url(i/89.gif) center center no-repeat #ffffff;

The preloader element’s display
property must be set to block
or inline block; otherwise, the loading icon won’t show.

Step 4:
Writing the Plugin

Let’s begin by creating the plugin structure and options.

Allowing for customization options makes a plugin far more flexible for the user.

We start off with the base structure:

$.fn.preloader = function(options){

	var defaults = {
		 ondone:function(){ },
		 oneachload:function(image){  },

	// variables declaration and precaching images and parent container
	 var options = $.extend(defaults, options),


Our Options

  • delay
    – Successive delay between fading in images
  • preload_parent
    – Add preload class to the parent mentioned. If not found, the image is wrapped within an anchor tag
  • ondone
    – Callback to be executed when all the images are loaded
  • oneachload
    – Called when each image is loaded with image as the parameter
  • fadein
    – Fade in animation duration

Step 5:

Next, we declare and precache the variables that we will be using in the rest of the plugin.

	var defaults = {
		 ondone:function(){ },
		 oneachload:function(image){  },

	// variables declaration and precaching images and parent container
	 var options = $.extend(defaults, options),
	       root = $(this),
               images = root.find("img").css( {"visibility":"hidden", opacity:0} ),
               counter = 0,
               i=0 ,
              checkFlag = [],
              delaySum = options.delay;

First, we precache the root element (always a best practice), then find the images (also making them hidden), and finally declare the variables which will be explained in greater detail as we counter them.

There are two things worth noting here: you might initially think the easiest solution is to hide the images, and then fade them in, rather than jumping through all of this code. However, the problem is that, if we hide the images, the browser marks the space they used to occupy as empty, and thus the layout, itself, is messed up when they’re eventually faded in. Okay, well what if we used opacity
to “show” and “hide” the images? That’s a better practice, though, some versions of IE doesn’t like this method.

Step 6:
Adding Preloader Class

We now will iterate over each image element, and check if its parent is the one mentioned in the option. If so, we add our preloader class to it; else, we wrap the image within an anchor tag with a class of preloader.

	var $this = $(this);
	if( $this.parent( options.preload_parent ).length==0 ) {
	   $this.wrap("<a class='preloader' />");
        } else {

      checkFlag[i++] = false;
images = $.makeArray(images);

Here, we are using an array checkFlag, and are setting each array’s item value to false. Its use will be made clear as you move along.

Step 7:
Bringing it All Together

We’ll now implement what actually happens behind the scenes. There is a boolean
property, called complete, associated with the image object. When the image has been loaded completely, this boolean is set to true. So, we keep checking this property for each image, and, if it is indeed set to true, we fade in that image.

We can use the setInterval
function to continuously determine whether the images have been loaded or not. This is where the check_timer
option comes in: it maps directly to our timer’s frequency.

An image also has an onload
event associated with it; you’re probably wondering why we aren’t using it. The reason is because some browsers don’t work well with that event; as such, we’re skipping it. We need a solution that works like a charm across all browsers. We start off with:

 init = function(){
	timer = setInterval(function(){}

is the variable which will reference the timer. This is needed in order to eventually stop the timer. This function is declared along with all the variables.

Checking Each Image

We’ll iterate through the array and check each image’s complete
property to determine whether it has finished downloading. If it has been downloaded, we will set it to visible and fade in slowly. When the animation has ended, we remove the preloader class from its parent.

for(i=0; i<images.length; i++) {
	if(images[i].complete == true) {
    	   .animate({opacity:1}, options.fadein, function(){

There’s a tiny issue here: the timer will continue to check — even after
the images have all been loaded.To counter this, we’ll add a counter variable, and increment it after each image has been loaded. This way, we can check if the counter variable is equal to the size of the images array. If that’s the case, we stop.

timer = setInterval(function(){
	if(counter>=checkFlag.length) {

	for( i=0; i<images.length; i++) {
		if(images[i].complete==true) {
	           .animate({opacity:1}, options.fadein, function(){



However, there’s another small issue now. Our timer may stop earlier than expected; if one image has been loaded, its complete
property has been set to true
and the counter thus increments by 1. Now, when the loop runs the next time, the image is already loaded, the complete
property is set totrue, and, thus, the loop will run twice! To overcome this problem, we use the checkFlag
array. When an image is loaded, we will set checkFlag
to true, and set the condition for the counter to increment only on the condition that the checkFlag
value is false. So counter is incremented only once: when an image is loaded for the first time.

timer = setInterval(function () {

    if (counter & gt; = checkFlag.length) {

    for (i = 0; i & lt; images.length; i++) {
        if (images[i].complete == true) {
            if (checkFlag[i] == false) {
                checkFlag[i] = true;

                delaySum = delaySum + options.delay;

            $(images[i]).css("visibility", "visible").delay(delaySum).animate({
                opacity: 1
            }, options.fadein, function () {

}, options.check_timer);

Note that we call the ondone
function when the counter flag is greater than the array’s length – i.e. when all the images are loaded. When the counter is incremented, oneachload
is called with the current image passed as the parameter.

Step 8:
The Easy Part

Finally, in this step, we call the init();
function at the end of the plugin.

init(); // called at the last line of plugin

That’s all; we have made a fully working preloading plugin, and its size is less than 2kb. Still, one problem remains: the loading icon image is loaded randomly. We don’t want that. In the next section we will take care of that.

Step 9:
Going the Extra Mile

To fix the problem mentioned above, we’ll load the icon first, and then call the init
function. But the loading icon is a background image, so we inject it as an image in the page, while keeping it hidden. When it loads, we call the init
function. We’re essentially preloading the icon itself.

var icon = jQuery("<img />", {

    id: 'loadingicon',
    src: 'css/i/89.gif'


timer = setInterval(function () {

    if (icon[0].complete == true) {

}, 100);

First we create an image object with an id
of loadingicon, and a source
pointing to the path of the loading icon. Then, we append it the body
and initially hide it. Lastly, we set the interval to check if the icon has been loaded or not. If it has, we kill the timer, and start preloading the images. Don’t forget to remove that icon too!


With that last step, we’re done! This functionality works in all browsers, just as expected, and degrades gracefully. Just be sure set the preloader element’s display
property to block
or inline-block. It is now ready to be used in your projects. Thanks for reading!



Entry filed under: Javascript, Jquery, Out-source, Tutorials.

Three Great Books For Practicing Javascript Create a Multi-step Register Form with jQuery

Bir Cevap Yazın

Aşağıya bilgilerinizi girin veya oturum açmak için bir simgeye tıklayın: Logosu hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Google+ fotoğrafı

Google+ hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Twitter resmi

Twitter hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Facebook fotoğrafı

Facebook hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )


Connecting to %s

Trackback this post  |  Subscribe to the comments via RSS Feed


Kasım 2010
« Eki   Ara »

Most Recent Posts

%d blogcu bunu beğendi: