Question

I am loading content dynamically using .load() i want to display a loading image (.gif) to show the user that something is happening.

How would i achieve this with the below code?

$('#prac_slider li a').click(function(){
    if($(this).attr('class') != 'active') {
        $('#prac_slider li a').removeClass('active').animate({ "opacity" : 0.5 });
        $(this).addClass('active').animate({ "opacity" : 1 });
        var $permalink = $(this).attr('href');
        $('#practitioner').fadeOut(1000, function(){
            $(this).load($permalink + ' #pracLoad',function(){
            $(this).fadeIn();
        })
        });
    }
    return false;
});

Answer 1

You might just want to do something like

$(document).ajaxStart(function(){ 
    $('#AJAXload').show(); 
}).ajaxStop(function(){ 
    $('#AJAXload').hide();
});