本文介绍了引导页面加载进度条动画的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想有一个页面加载到一个div和而页面加载显示进度条(preferably有点接近页面负载的实际进度),然后该页面后,加载效果基本show酒吧和显示的内容。
事件当前链:
- 用户点击链接
- 进度条滑下
- 进度条的动画以页面加载
- 进度条上滑
- 页面内容显示
code:
功能页面加载(URL){
$(身体)的CSS('光标','等待')。
$('#页面负载包')了slideDown()。
。宽度= $('#页面加载指示器')的CSS('宽','100%');
$('#主机')。负载(URL,函数(){
$('#页面负载包')效果基本show();
$(身体)的CSS('光标','默认')。
});
}
- 我将如何修改此code相匹配的资源负载的实际进展情况?
- 我怎么能效果基本show股利出现之前的内容?
======= =======编辑
在使用的答案code下面我只是将宽度设置为80%,get函数调用之前
然后在成功呼叫其设置为100%。下滑的DIV向上,然后显示HTML
功能页面加载(URL){
$(身体)的CSS('光标','等待')。
$('#主机)HTML('')。
$('#页面负载包')了slideDown()。
$('#页面加载指示器')的CSS('宽','80%'); $获得(URL,功能(数据){
$('#页面加载指示器')的CSS('宽','100%');
$('#页面加载-包装)。效果基本show('慢',函数(){
$('#主机')的html(数据)。
});
$(身体)的CSS('光标','默认')。
});
}
解决方案
You cant with just javascript.
Use $.get
instead since it allows you to slide up before setting the content:
function pageLoad(url){
$('body').css('cursor','wait');
$('#page-load-wrap').slideDown();
width = $('#page-load-indicator').css('width','100%');
$.get(url,function(data){
$('#page-load-wrap').slideUp();
$('body').css('cursor','default');
// and load the html
$('#mainframe').html(data);
});
}
这篇关于引导页面加载进度条动画的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!