Lateral Code
A Web Development Blog Focused on Code and Technology
Currently Browsing: Home » Using Load Icons
Using Load Icons
By Karthik Viswanathan
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.
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:
- Hide the
#large-imgso it loads in the background. - When the image has finished loading, hide the load icon.
- 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!
Tags: javascript, tutorial
This entry was posted on Tuesday, April 7th, 2009 at 20:18:03. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
5 Responses to “Using Load Icons”
Leave a Reply
OMG this is nice and useful jQuery trick. How did I didn’t think of this before. Thank you.
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?
@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:
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.
great tip, will use it
Hey Karthik Viswanathan, can you combine that java code with the firefox fix. I dont know how to add to the code. Thanks