首页>Program>source

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

每当用户单击导航链接时,它都会使用 .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>

如您所见,我在 ajaxstart()上显示了一个Bootstrap进度栏 ,然后在我调用的页面上,在加载每个项目后修改进度栏的值。

这在Firefox上效果很好,并且在等待页面加载时可以看到进度条,但在Chrome或IE上不起作用。

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

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

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

最新回答
  • 1月前
    1 #

    让我引荐您访问此页面,它描述了如何添加 progress event jQuery中的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/

  • 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();
            }
        });
    });
    

  • REST API和DDD
  • 在Fancybox jQuery中打开youTube视频