Following on from our previous post on using jquery to make an ajax load, we are now going to do something very similar, but with an ajax loading image.
Loading images, or loaders, are very important as the let the user know that something is happening on the page. They are particularly important when large amount of data or large images are loaded and the page seems to do nothing.
First thing we are going to do is get our loader. One of the best places on the web to create custom ajax loaders for free is ajaxload.info. We created out ajax loader, it looks like this:
Cool, now lets write our html:
Very simple stuff. The ajaxlink span contains the text “Click me” which when clicked will perform our ajax load. The ajaxloader div contains our loading image, and it starts off hidden (display: none). The loader div is the placeholder where our ajax content will be loaded into.
The ajax page (the page that gets loaded with ajax) looks like this:
The PHP function sleep() creates a pause, in this case a 5 second pause. We are doing this so you get to see the ajax loader image in action, otherwise the content would load so fast you would barely get a glimpse of your hard work! When the sleep function is finished, we echo out ‘hello’.
Now for the good stuff, our jQuery
$('.ajaxlink').click(function(){
$('.ajaxloader').fadeIn();
$('.loader').hide().load('ajaxpage.php', function() {
$('.ajaxloader').hide();
$(this).fadeIn();
});
});
});
As always, we create our jQuery block. Inside our jQuery block we create a click event for the element with a class of ajaxlink: $(‘.ajaxlink’).click(function(){…
Inside our click function, we use a fadeIn() on our ajaxloader div. Next up we do our load function on the loader div, which looks like this: $(‘.loader’).hide().load(‘ajaxpage.php’, function() {…
You will see we have a hide() function which hides the ajax div (.loader) before starting the load. This is so we can use a fadeIn() on the div when the content is ready for good looks. The load function has the path to the page to be loaded (ajaxpage.php). We then have the callback function which contains the events to fire once the load is complete. Firstly, we hide the ajaxloader div: $(‘.ajaxloader’).hide(); , and then we fade in the loader div: $(this).fadeIn();
Simple, but effective. You can download the source here, and check out the demo here
Peace!
