Wordpress ajax pagination

I'm using this piece of code i found from a tutorial to enable Ajax pagination on my wordpress site. It all works find but i'd like to enhance it slightly.

At the moment when you click the next page button there is a slight pause where nothing happens. I'd like to display one of the "waiting" type images like this (http://www.costacruises.co.uk/B2C/Images/Skin/Default/gfx/ico_waiting.gif) but unsure of how i'd do this.

Heres the code i'm using.

jQuery('#postPagination a').live('click', function(e){
    e.preventDefault();
    var link = jQuery(this).attr('href')开发者_JAVA百科;
    jQuery('#content-inner').fadeOut(500).load(link + ' #content-inner', function(){ jQuery('#content-inner').fadeIn(500); });
});

Thanks

You need to create the "loading" element, position it correctly with CSS and set to display:none. jQuery's fadeOut and fadeIn functions support specification of callbacks, so you would change the above code to something more like this

jQuery('#postPagination a').live('click', function(e){
    e.preventDefault();
    var link = jQuery(this).attr('href');
    jQuery('#content-inner').fadeOut(500, function(){
            jQuery("#spinner").show();
    }).load(link + ' #content-inner', function(){ jQuery('#content-inner').fadeIn(500, function(){
            jQuery("#spinner").hide();
    }); });
});

changing "#spinner" to the id or class of your loading element.