小编典典

在单页网站中使用jquery ajax加载页面时显示进度条

ajax

我有一个基本页面,顶部有一个导航栏,还有一个包装器主体。

每当用户单击导航链接时,它都会用于.load将页面内容加载到包装div中。

$(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上不起作用。

有一个更好的方法吗?我是正确执行此操作还是有其他方法执行此操作?

例如,获取$.ajax以kb为单位的页面大小并在接收到数据时动态更新进度条?

我正在尝试加载Gmail时产生类似于“加载”页面的内容。


阅读 265

收藏
2020-07-26

共1个答案

小编典典

请允许我引用此页面,它描述了如何在jquery中将progress event侦听器添加到xhr对象(仅在这些浏览器中有效,在较旧的浏览器中您仅依赖于当前使用的基础)。

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

$.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
  }
});

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

这是一个JSFiddle,它正在运行中:http//jsfiddle.net/vg389mnv/1/

2020-07-26