我正在使用它在没有页面刷新的情况下动态加载事件,但是在加载时有点太多时间因此为了更好的用户体验,我认为我们应该添加“加载事件”或类似但我的尝试一直是徒劳的所以远。
function calendarAjax () {
$('#month_nav a').live('click', function() {
$('#events_container').animate({ opacity: "0" }, 200 ).load($(this).attr('href')+' #events_content' , function(){
$(this).animate({ opacity: "1" }, 600 );
});
return false;
})
};
非常感谢任何帮助。
感谢。
答案 0 :(得分:1)
你需要3件事:
装载机:
<div id="loader">
I'm loading something
</div>
装载机的CSS:
#loader {
/* some design */
}
你需要制作一个能够切换其可见性的javascript方法:
var loader = {
show: function() {
$('#loader').show();
},
hide: function() {
$('#loader').hide();
}
};
然后,只要您想要加载,就可以简单地说loader.show()
,当你想要忽略该信息时,可以loader.hide()
。
答案 1 :(得分:1)
有几种方法,这是使用$ajaxStart和$.ajaxStop
的全局加载图片/文字代码$('#loadingDiv')
.hide() // hide it initially
.ajaxStart(function() {
$(this).show();
})
.ajaxStop(function() {
$(this).hide();
});
假设您的加载div的ID为loadingDiv
,其中包含文字或加载图片。
<强>更新强>
$.load是一个jQuery Shorthand method,与其他几个一样,例如$.post,$.get,$getJSON,$.getScript使用了$.ajax功能。
$.ajaxStart是一种在第一个ajax请求启动时注册要执行的回调的方法 $.ajaxStop的使用方法与注册所有ajax请求完成时要执行的回调的方式相同
因此,如果您使用上面的代码来显示和隐藏加载div,它将自动显示在$.load
函数的ajax请求启动时加载文本/图像,并在ajax请求完成时隐藏,假设您只有该页面中的一个$.ajax
或$.ajax
速记方法。
答案 2 :(得分:0)
Jquery BlockUI plugin非常适合您的需求。