那些遇到过的问题

类似YouTube的进度条

Swa*_*rua 36 youtube jquery progress-bar

我正在尝试制作类似YouTube的进度条.栏应该在页面启动时加载.到目前为止我已经尝试过了.这是我的脚本的代码

$({property: 0}).animate({property: 105}, {
    duration: 4000,
    step: function() {
        var _percent = Math.round(this.property);
        $('#progress').css('width',  _percent+"%");
        if(_percent == 105) {
            $("#progress").addClass("done");
        }
    },
    complete: function() {
        alert('complete');
    }
});
Run Code Online (Sandbox Code Playgroud)

我也包括相同的jsFiddle,http://jsfiddle.net/ajaSB/3/.

在这个jsfiddle中,会出现进度条,但是当我在IDE中使用相同的代码并运行该文件时,不会出现进度条.我究竟做错了什么？或者,如果有另一种方式来获得酒吧？

Art*_*lev 30

NProgress.js是一个非常酷和简单的库.Git存储库就在这里.它有一个MIT许可证.

  • `bower install nprogress`和*bam*我们有youtube进度条 (2认同)

awe*_*awe 18

以下是完整HTML页面的示例,包括对jQuery库的引用.

虽然它大部分都没有,但是你应该将代码包装在一起, $(document).ready(...)这样你就可以确保在运行代码之前加载了所有必需的资源.

<!DOCTYPE html>
<html>
  <head>
  <title>Progress Test</title>

  <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>

  <script type="text/javascript">
    $(document).ready(function(){
      $({property: 0}).animate({property: 105}, {
        duration: 4000,
        step: function() {
          var _percent = Math.round(this.property);
          $("#progress").css("width",  _percent+"%");
          if(_percent == 105) {
            $("#progress").addClass("done");
          }
        },
        complete: function() {
          alert("complete");
        }
      });
    });
  </script>

  <link href="css/progressbar.css" rel="stylesheet" type="text/css" />

  </head>
  <body>
    <div id="progress" class="waiting">
  </body>
</html>
Run Code Online (Sandbox Code Playgroud)

请注意,这是针对jQuery的第2版,它不支持Internet Explorer 8及更早版本.如果您需要支持旧的Internet Explorer版本,则应该以jQuery 1.10.2为目标.

如果进度条没有显示,但是你alert("complete")应该在完成动画后四秒钟之后获得,那么你对CSS的引用很可能是错误的(没有指向正确的位置或拼写错误的文件名).

Nat*_*ivi 10

演示:小提琴

请尝试以下代码.您必须将此文件运行到localhost(本地服务器).

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $( document ).ready(function() {
        $({property: 0}).animate({property: 105}, {
            duration: 4000,
            step: function() {
                var _percent = Math.round(this.property);
                $('#progress').css('width',  _percent+"%");
                if(_percent == 105) {
                    $("#progress").addClass("done");
                }
            },
            complete: function() {
                alert('complete');
            }
        });
    });
</script>
<style>
    #progress {
        position: fixed;
        z-index: 2147483647;
        top: 0;
        left: -6px;
        width: 0%;
        height: 2px;
        background: #b91f1f;
        -moz-border-radius: 1px;
        -webkit-border-radius: 1px;
        border-radius: 1px;
        -moz-transition: width 500ms ease-out,opacity 400ms linear;
        -ms-transition: width 500ms ease-out,opacity 400ms linear;
        -o-transition: width 500ms ease-out,opacity 400ms linear;
        -webkit-transition: width 500ms ease-out,opacity 400ms linear;
        transition: width 500ms ease-out,opacity 400ms linear
    }
    #progress.done {
        opacity: 0
    }
    #progress dd,#progress dt {
        position: absolute;
        top: 0;
        height: 2px;
        -moz-box-shadow: #b91f1f 1px 0 6px 1px;
        -ms-box-shadow: #b91f1f 1px 0 6px 1px;
        -webkit-box-shadow: #b91f1f 1px 0 6px 1px;
        box-shadow: #b91f1f 1px 0 6px 1px;
        -moz-border-radius: 100%;
        -webkit-border-radius: 100%;
        border-radius: 100%
    }
    #progress dd {
        opacity: 1;
        width: 20px;
        right: 0;
        clip: rect(-6px,22px,14px,10px)
    }
    #progress dt {
        opacity: 1;
        width: 180px;
        right: -80px;
        clip: rect(-6px,90px,14px,-6px)
    }
    @-moz-keyframes pulse {
        30% {
            opacity: 1
        }
        60% {
            opacity: 0
        }
        100% {
            opacity: 1
        }
    }
    @-ms-keyframes pulse {
        30% {
            opacity: .6
        }
        60% {
            opacity: 0
        }
        100% {
            opacity: .6
        }
    }
    @-o-keyframes pulse {
        30% {
            opacity: 1
        }
        60% {
            opacity: 0
        }
        100% {
            opacity: 1
        }
    }
    @-webkit-keyframes pulse {
        30% {
            opacity: .6
        }
        60% {
            opacity: 0
        }
        100% {
            opacity: .6
        }
    }
    @keyframes pulse {
        30% {
            opacity: 1
        }
        60% {
            opacity: 0
        }
        100% {
            opacity: 1
        }
    }
    #progress.waiting dd,#progress.waiting dt {
        -moz-animation: pulse 2s ease-out 0s infinite;
        -ms-animation: pulse 2s ease-out 0s infinite;
        -o-animation: pulse 2s ease-out 0s infinite;
        -webkit-animation: pulse 2s ease-out 0s infinite;
        animation: pulse 2s ease-out 0s infinite
    }
</style>
<div id="progress" class="waiting">
    <dt></dt>
    <dd></dd>
</div>
Run Code Online (Sandbox Code Playgroud)

要么:

只需将此文件上传到您的服务器,然后执行该文件即可.绝对有效.

HMa*_*gdy 5

LoadingBar.js:在您的网站上添加类似YouTube的加载栏

YouTube最近在页面顶部添加了一个红色加载栏,表示下一页正在加载.您可能想知道为什么他们不依赖于浏览器的加载栏.那是因为下一页正在加载Ajax,它不会触发正常的页面加载机制.这就是为什么浏览器没有拿起它.正如您可能知道的那样,通过Ajax加载整个内容可以使您的网站加载速度比正常方式更快.

这是因为所有静态内容都保持不变,只加载了动态内容.这样,您就不必一直向服务器询问静态内容,这些内容永远不会一次又一次地改变,从而产生过载.

DEMO

下载

为网络创建类似YouTube的加载栏

正如Dmitry Fadeyev在UsabilityPost上发表的一篇博文中所提到的,许多开发人员正在越来越多地将这种UI模式集成到他们的网站中.今天我决定构建一个jQuery插件,它允许你为你网站上的任何Ajax链接添加一个加载栏.让我告诉你它是如何工作的.

基本用法

HTML标记

<a href="<<URL>>" class="ajax-call">..</a>
<div id="loadingbar-frame"></div>
Run Code Online (Sandbox Code Playgroud)

JavaScript的

$(".ajax-call").loadingbar({
  target: "#loadingbar-frame",
  replaceURL: false,
  direction: "right",

  /* Default Ajax parameters.  */
  async: true, 
  complete: function(xhr, text) {},
  cache: true,
  error: function(xhr, text, e) {},
  global: true,
  headers: {},
  statusCode: {},
  success: function(data, text, xhr) {},
  dataType: "html",
  done: function(data) {}
});
Run Code Online (Sandbox Code Playgroud)

CSS定制

#loadingbar {
    background: YOUR COLOR;
}

#loadingbar dd, #loadingbar dt {
  -moz-box-shadow: YOUR COLOR 1px 0 6px 1px;
  -ms-box-shadow: YOUR COLOR 1px 0 6px 1px;
  -webkit-box-shadow: YOUR COLOR 1px 0 6px 1px;
  box-shadow: YOUR COLOR 1px 0 6px 1px;
}
Run Code Online (Sandbox Code Playgroud)

就是这样.现在,您将拥有一个用于所有Ajax调用的强大加载栏.我希望你喜欢这个:)

  • 信用:http://www.onextrapixel.com/2013/09/02/loadingbar-js-adding-a-youtube-like-loading-bar-to-your-website/ (2认同)

Rik*_*Rik 5

如果你想为你的AJAX应用程序提供一个'类似youtube'的加载器,它实际上代表了合法的页面加载进度,请考虑以下解决方案(基于Nathan Srivi的回答):

在你的.ajax()方法中:

$.ajax 
( 
  { 
...
    xhr: function() 
    { 
      var xhr = new window.XMLHttpRequest();

      //Upload progress
      xhr.upload.addEventListener
      (
        "progress",
        function( event)
        {
          if( event.lengthComputable )
          {
            var percentComplete = Math.round( ( ( event.loaded / event.total ) * 100 ) );

            // Do something with upload progress
            $( '#progress' ).css( { 'width':  percentComplete + '%' } );

            if( percentComplete == 100 )
            {
              $( '#progress' ).addClass( 'finished' );
              $( '#progress' ).delay( 500 ).queue
              (
                'fx',
                function( next )
                {
                  $( '#progress' ).addClass( 'notransition' );
                  $( this ).css( { width: '' } );
                  $( this ).removeClass( 'finished' );
                  next();
                }
              );
            }
          }
        },
        false
      );

      //Download progress
      xhr.addEventListener
      (
        "progress",
        function( event )
        {
          if( event.lengthComputable )
          {
            var percentComplete = Math.round( ( ( event.loaded / event.total ) * 100 ) );

            // Do something with upload progress
            $( '#progress' ).css( { 'width':  percentComplete + '%' } );

            if( percentComplete == 100 )
            {
              $( '#progress' ).addClass( 'finished' );
              $( '#progress' ).delay( 500 ).queue
              (
                'fx',
                function( next )
                {
                  $( '#progress' ).addClass( 'notransition' );
                  $( this ).css( { width: '' } );
                  $( this ).removeClass( 'finished' );
                  next();
                }
              );
            }
          }
        },
        false
      );

      return xhr;
    },
...
    success: function( data, textStatus, xhr )
    {
      ...
      // Reset our ajax loading progress bar
      $( '#progress' ).removeClass( 'notransition' );
      ...
    }
Run Code Online (Sandbox Code Playgroud)

然后,在你的CSS; 用这个:

#progress {
  position: fixed;
  opacity: 1;
  z-index: 2147483647;
  top: 0;
  left: -6px;
  width: 0%;
  height: 2px;
  background: #b91f1f;
  -moz-border-radius: 1px;
  -webkit-border-radius: 1px;
  border-radius: 1px;
  -moz-transition: width 500ms ease-out,opacity 400ms linear;
  -ms-transition: width 500ms ease-out,opacity 400ms linear;
  -o-transition: width 500ms ease-out,opacity 400ms linear;
  -webkit-transition: width 500ms ease-out,opacity 400ms linear;
  transition: width 500ms ease-out,opacity 400ms linear;
}
#progress.finished {
  opacity: 0 !important;
}
#progress.notransition {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
  -ms-transition: none !important;
  transition: none !important;
}

#progress dd,#progress dt {
  position: absolute;
  top: 0;
  height: 2px;
  -moz-box-shadow: #b91f1f 1px 0 6px 1px;
  -ms-box-shadow: #b91f1f 1px 0 6px 1px;
  -webkit-box-shadow: #b91f1f 1px 0 6px 1px;
  box-shadow: #b91f1f 1px 0 6px 1px;
  -moz-border-radius: 100%;
  -webkit-border-radius: 100%;
  border-radius: 100%;
}
#progress dd {
  opacity: 1;
  width: 20px;
  right: 0;
  clip: rect(-6px,22px,14px,10px); 
}
#progress dt {
  opacity: 1;
  width: 180px;
  right: -80px;
  clip: rect(-6px,90px,14px,-6px);
}
@-moz-keyframes pulse {
  30% {
    opacity: 1
  }
  60% {
    opacity: 0
  }
  100% {
    opacity: 1
  }
}
@-ms-keyframes pulse {
  30% {
    opacity: .6
  }
  60% {
    opacity: 0
  }
  100% {
    opacity: .6
  }
}
@-o-keyframes pulse {
  30% {
    opacity: 1
  }
  60% {
    opacity: 0
  }
  100% {
    opacity: 1
  }
}
@-webkit-keyframes pulse {
  30% {
    opacity: .6
  }
  60% {
    opacity: 0
  }
  100% {
    opacity: .6
  }
}
@keyframes pulse {
  30% {
    opacity: 1
  }
  60% {
    opacity: 0
  }
  100% {
    opacity: 1
  }
}
#progress.waiting dd,#progress.waiting dt {
  -moz-animation: pulse 2s ease-out 0s infinite;
  -ms-animation: pulse 2s ease-out 0s infinite;
  -o-animation: pulse 2s ease-out 0s infinite;
  -webkit-animation: pulse 2s ease-out 0s infinite;
  animation: pulse 2s ease-out 0s infinite
}
#progress.notransition dd,#progress.notransition dt {
  -moz-animation: none !important;
  -ms-animation: none !important;
  -o-animation:  none !important;
  -webkit-animation:  none !important;
  animation:  none !important;
}
Run Code Online (Sandbox Code Playgroud)

现在你应该有一个适用于每个AJAX操作的加载器......并且真正能够表示接收到多少响应的真实百分比,而不是仅在第一次加载主页时播放奇特的动画.

为了使它在初始页面加载时运行(即它实际上没有显示合法进度),使用Nathan Srivi在document.ready上面提到的函数中提到的方法:

$( document ).ready(function() {
    $({property: 0}).animate({property: 105}, {
        duration: 4000,
        step: function() {
            var _percent = Math.round(this.property);
            $('#progress').css('width',  _percent+"%");
            if(_percent == 105) {
                $("#progress").addClass("done");
            }
        },
        complete: function() {
            alert('complete');
        }
    });
});
Run Code Online (Sandbox Code Playgroud)

最后,

您需要确保将"Content-Length"标头发送到浏览器,以使此设计的加载程序正常工作...否则该event.lengthComputable成员将解析为false ...并且不会加载任何进度条.

HTH,随意编辑不一致.

归档时间：

查看次数：

33688 次

最近记录：

8 年，5 月 前
使用内容分发网络(CDN)有哪些优缺点？ 55
更多相关链接
相关归档
jquery如果div id有孩子 193
选择select2后触发一个动作 70
如何检测按下的键是否会在<input>文本框中产生一个字符？ 34
CSS比例和方形中心裁剪图像 29
当后退按钮触发popState时,如何防止页面刷新？ 25
jQuery:将内容添加到div的末尾 25
如何在新标签中打开链接时保持当前窗口？ 24
谷歌reCAPTCHA数据回调无法正常工作 19
Python进度条ValueError:值超出范围 5
Python非循环函数的进度条 4
难疑归档
如何检查jQuery中是否隐藏了一个元素？ 7481
什么是"大O"符号的简单英语解释？ 4851
如何检测元素外部的单击？ 2367
npm package.json文件中依赖项,devDependencies和peerDependencies之间有什么区别？ 1872
为什么在数组迭代中使用"for ... in"是一个坏主意？ 1761
如何在JavaScript中将十进制转换为十六进制？ 1387
丢弃Git中的本地提交 1304
varchar和nvarchar有什么区别？ 1300
有没有办法从APK文件中获取源代码？ 1218
CSS calc()函数中的Sass变量 1182