Jquery .load()图像加载gif

Jquery .load()图像加载gif,jquery,Jquery,我正在使用.load()动态加载内容。我想显示加载图像(.gif),向用户显示正在发生的事情 我如何使用下面的代码实现这一点 $('#prac_slider li a').click(function(){ if($(this).attr('class') != 'active') { $('#prac_slider li a').removeClass('active').animate({ "opacity" : 0.5 }); $(this).add

我正在使用.load()动态加载内容。我想显示加载图像(.gif),向用户显示正在发生的事情

我如何使用下面的代码实现这一点

$('#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;
});

你可能只是想做一些类似的事情

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

将样式添加到css文件中

.hidden {display:none;}
现在在jquery代码中使用如下内容

$('#prac_slider li a').click(function(){
    if($(this).attr('class') != 'active') {
        $('#loadingimage').removeClass('hidden');
        $('#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();
        })
        $('#loadingimage').addClass('hidden');
        });
    }
    return false;
});
最后有一个这样的图像

<img src=""images/loading.gif" class="hidden" id="loadingimage" />

$.ajax({
    beforeSend: function(){
// Handle the beforeSend event
    $('#loading').show();
},
    complete: function(){
    // Handle the complete event
    $('#loading').hide();
    }
    //DO STUFF
});