在单页网站中使用jquery ajax加载页面时显示进度条
2022-08-30 13:50:54
我有一个基本页面,顶部有一个导航栏,还有一个包装器正文。
每当用户单击导航链接时,它都会用于将页面内容加载到包装器 div 中。.load
$(this).ajaxStart(function(){$('.progressbar .bar').css('width','5%');$('.progressbar').fadeIn();});
$(this).ajaxEnd(function(){$('progressbar').hide();});
$('.ajaxspl').on('click',function(e){
e.preventDefault();
var url=$(this).data('url'),
wrap=$('body #wrap');
//clean the wrapper
wrap.slideUp().html('');
//load page into wrapper
wrap.load(url,function(){wrap.slideDown();});
});
返回值示例:.load
<div>
...content
</div>
<script>$('.progressbar .bar').css('width','30%');</script>
<link href="/assets/css/datepicker.css" rel="stylesheet" />
<script>$('.progressbar .bar').css('width','60%');</script>
<link href="/assets/css/main.css" rel="stylesheet" />
<script>$('.progressbar .bar').css('width','90%');</script>
<script>//blah blah</script>
如您所见,我有一个 Bootstrap 进度条,我在上面显示,在我调用的页面上,我在加载每个项目后修改进度条的值。ajaxstart()
这在Firefox上效果很好,我可以在等待页面加载时看到进度条,但它在Chrome或IE上不起作用。
有没有更好的方法来做到这一点?我是否正确地执行此操作,或者是否有其他方法可以执行此操作?
例如,获取页面大小(以 kb 为单位)并在收到数据时动态更新进度条?$.ajax
我正在尝试在Gmail加载时生成类似于“加载”页面的内容。