在单页网站中使用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加载时生成类似于“加载”页面的内容。


答案 1

请允许我向您推荐此页面 ,它描述了如何在jquery中向xhr对象添加侦听器(它仅适用于这些浏览器,在较旧的浏览器中,您只需依赖于您当前使用的相同基础)。progress event

作为参考,我复制了下面的相关代码(您可能只对“下载进度”部分感兴趣):

$.ajax({
  xhr: function()
  {
    var xhr = new window.XMLHttpRequest();
    //Upload progress
    xhr.upload.addEventListener("progress", function(evt){
      if (evt.lengthComputable) {
        var percentComplete = evt.loaded / evt.total;
        //Do something with upload progress
        console.log(percentComplete);
      }
    }, false);
    //Download progress
    xhr.addEventListener("progress", function(evt){
      if (evt.lengthComputable) {
        var percentComplete = evt.loaded / evt.total;
        //Do something with download progress
        console.log(percentComplete);
      }
    }, false);
    return xhr;
  },
  type: 'POST',
  url: "/",
  data: {},
  success: function(data){
    //Do something success-ish
  }
});

请允许我说,尽管这对于单页网站来说是一个很大的过度,并且只对大文件真正有用。此外,图像和类似的媒体不是以这种方式处理的,您需要监视图像的加载(或通过ajax自己做)以使这样的系统完美。

这是一个JSFiddle,展示了这一点:http://jsfiddle.net/vg389mnv/1/


答案 2

以上答案是正确的(赞成)。自定义xhr请求运行良好,我用您的代码(以及更大的文件以查看实际进度)对其进行了测试,不妨将其复制到此处:

$('.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
    console.log('starting ajax request');
    $.ajax({
        xhr: function() {
            var xhr = new window.XMLHttpRequest();
            xhr.addEventListener('progress', function(e) {
                if (e.lengthComputable) {
                    $('.progressbar .bar').css('width', '' + (100 * e.loaded / e.total) + '%');
                }
            });
            return xhr;
        }, 
        type: 'POST', 
        url: url, 
        data: {}, 
        complete: function(response, status, xhr) {
            console.log(response)
            wrap.html(response.responseText);
            wrap.slideDown();
        }
    });

});