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

问题描述：

我有一个基本页面，顶部有一个导航栏和一个包装体。在单页面网站中使用jquery ajax加载页面时显示progressbar

只要用户点击导航链接，它就会使用.load将页面内容加载到包装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();}); 
});

例子：

<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>

正如你所看到的，我有一个引导进度条，我表现出对ajaxstart()，而我所说的页面上我修改的那个值每个项目后的进度条被加载。

这很适用于Firefox，我可以在等待页面加载时看到进度条，但它在Chrome或IE上不起作用。

有没有更好的方法来做到这一点？我是否正确地做了这件事，还是有另一种方法来做到这一点？

例如，获取$.ajax页面大小（KB），并随着数据的接收即时更新进度条？

我试图在加载Gmail时生成类似于加载页面的内容。

这是有用的，如果你可以创建一个HTTP：//的jsfiddle .net – Amir 2013-03-11 04:50:08

你的jQuery版本是什么？ AJAX事件应该只附加到jquery 1.9的文档中。 – 2013-03-15 20:05:52

yp im使用1.9 – Zalaboza 2013-03-15 21:27:09

答

请允许我向您推荐this page，它desribes如何添加一个progress event监听到XHR对象（仅适用于these browsers，在旧的浏览器，你只需依靠您正在使用相同的基础上）在jQuery的。

仅供参考我抄在下面的相关代码（你只感兴趣可能是“下载进度”部分）：

$.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/

我发现[这个库]（https://github.com/rstacruz/nprogress）对我的需求非常有用。这很棒。 – 2015-10-30 15:27:10

@RNKushwaha老实说，不要在这种情况下得出结论;-)如果你无法得到工作答案，请求求助。我真诚地以为这个答案已经过时，因此几乎最终将其删除。噢，好吧，以前我非常苛刻的评论道歉，很高兴你的项目能够正常工作:)。 – 2015-10-30 19:05:54

请注意，它只是与'asynch：true'一起工作 – kastelli 2015-11-07 12:25:40

答

以上回答是正确的（upvoted）。自定义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(); 
     } 
    }); 

});

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

相关推荐