Jquery .load()图像加载gif
我正在使用.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
$('#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
});