Join 394 people who get free RSS updates and follow us on Twitter.

Using Load Icons

4

Posted by Karthik Viswanathan on Tue 7 April, 2009 at 20:18:03 · Tags: ,

Imagine a situation in which you enter a new site. The content you are desperately searching for doesn’t seem to be loading. You don’t know whether something is actually loading, or if it is just not there. You finally decide to exit the page.

This situation can be very typical when websites generally need large files to be downloaded. In order to combat such a situation, a load icon may be used to signify that something is loading.

In this simple tutorial, I will take you through the usage of one of these icons in your own website.

Load Icon

View a Demo Download the Files

To begin, obtain a simple ajax-loader.gif image from AjaxLoad.info. This image will be the basis in which to create the loading effect. For this tutorial, I will use the default image.

Now, let’s create a simple HTML file with two images:

<img id="loader" src="ajax-loader.gif" alt="Loading, Loading!"></img>
<img id="large-img" src="http://server.flowoflogic.com/gd.php" alt="London Eye"></img>

#loader signifies the load icon and #large-img is a large image which will take a bit of time to load.

We may now import jQuery:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

The routine we need to create in jQuery has a clear structure:

  1. Hide the #large-img so it loads in the background.
  2. When the image has finished loading, hide the load icon.
  3. Display the image.

Here is the resulting code:

$(function() {
	$('#large-img').hide();
	$('#large-img').load( function() {
		$('#loader').hide();
		$('#large-img').show();
	} );
});

For those of you who don’t want an extra 19 KB from jQuery, use the following:

var largeImg = document.getElementById('large-img');
largeImg.style.display = 'none';
largeImg.onload = function() {
	document.getElementById('loader').style.display = 'none';
	largeImg.style.display = 'block';
}

Good luck!

Related posts:

  1. Simple Slideshow
  2. 4 Ways to Decrease Page Loading Time
  3. Link nudging with jQuery
  4. Link nudging with jQuery continued
  5. JQuery Drop Down Menu

Share this Article

4 Responses to “Using Load Icons”

  1. Perfectflow on Tue 14 April, 2009 says:

    OMG this is nice and useful jQuery trick. How did I didn’t think of this before. Thank you.

  2. JohnDBB on Tue 14 April, 2009 says:

    I have tried it on a site but sometimes (seems randomly) with Firefox it doesn’t work as the loading icon stays forever and the image doesn’t appear. Any ideas?

  3. Karthik Viswanathan on Wed 15 April, 2009 says:

    @JohnDBB: I have experienced this same problem when the user refreshes the page multiple times in a short interval. To remedy the situation, I suggest adding this function:

    function loadAnyway() {
	document.getElementById('loader').style.display = 'none';
	document.getElementById('large-img').style.display = 'block';
}

    Conversely, if you are using jQuery, you may use this:

    function loadAnyway() {
	$('#loader').hide();
	$('#large-img').show()';
}

    Now, using the timeout of your choice, place this line of code in your JavaScript:

    setTimeout( "loadAnyway()", timeout );

    Timeout must be an integer that represents the time (in milliseconds) to wait before forcibly removing the load icon and trying to display the actual image.

    If you are still having trouble, feel free to leave another comment.

  4. b2b on Wed 24 June, 2009 says:

    great tip, will use it

Trackbacks/Pingbacks

Leave a Reply