显示进度条而使用jQuery阿贾克斯单页网站的加载页面 [英] show progressbar while loading pages using jquery ajax in single page website

问题描述

我有一个基本的页面顶部导航栏，以及包装体。

I have a basic page with a navigation bar on top, and a wrapper body.

每当用户点击它使用 .load 加载网页内容到包装的div。

Whenever a user clicks on a navigation link it uses .load to load the page content into the wrapper 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>

正如你所看到的，我有我显示在 ajaxstart一个引导进度条（），以及我称之为我修改进度条的值的页面后的每个项目被装载

As you can see, I have a Bootstrap progress bar that I show on ajaxstart(), and on the page that I call I modify that value of the progress bar after each item is loaded.

这很好地工作在Firefox上，我可以看到进度条在等待页面加载，但它不能在Chrome或IE浏览器。

This works nicely on Firefox and I can see the progress bar while waiting for the page to load, but it does not work on Chrome or IE.

有没有更好的方式来做到这一点？我是否正确这样做还是有其他方法来做到这一点？

Is there a better way to do this? Am I doing this correctly or is there another method to do this?

例如，让 $。阿贾克斯页大小（KB），并在在接收到数据动态更新进度条？

For example, getting $.ajax page size in kb and update progress bar on the fly as data is received?

我想产生类似加载页面东西的时候Gmail是加载。

I am trying to produce something similar to the Loading page when Gmail is loading.

推荐答案

请允许我向您推荐的这个页面，它desribes你怎么能监听器添加一个进度事件的XHR对象（仅适用于这些浏览器的，在旧的浏览器，你只需依靠jQuery的您正在使用相同的基础）

Allow me to refer you to this page , it desribes how you can add a progress event listener to the xhr object (which only works in these browsers, in older browsers you simply have rely on the same base you're currently using) in jquery.

有关引用我抄下面的相关code（你只会感到兴趣的下载进度部分大概）：

For reference I have copied the relevant code below (you would only be interested in the 'Download progress' part probably):

$.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）做出这样的制度完善。

Do allow me to say though that this is a lot of overkill for a single page website and only really becomes useful for large files. Additionally images and similar media aren't handled in this way and you would need to monitor the loading of images (or do it yourself through ajax) to make such a system perfect.

下面是一个的jsfiddle显示在操作这样的： http://jsfiddle.net/vg389mnv/1/

Here is a JSFiddle showing this in action: http://jsfiddle.net/vg389mnv/1/

这篇关于显示进度条而使用jQuery阿贾克斯单页网站的加载页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！