类似 YouTube 的进度条
Posted
技术标签:
【中文标题】类似 YouTube 的进度条【英文标题】：YouTube-like progress bar 【发布时间】：2013-08-23 09:48:15 【问题描述】：我正在尝试制作。该栏应在页面启动时加载。到目前为止，我已经尝试过了。这是我的脚本代码
$(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');
);
我也包括jsFiddle，http://jsfiddle.net/ajaSB/3/。
在这个 jsfiddle 中，出现了进度条，但是当我在 IDE 中使用相同的代码并运行文件时，没有出现进度条。我究竟做错了什么？或者如果有其他方法可以得到酒吧？
【问题讨论】：
您是否正确引用了 jQuery 文件？检查浏览器中的错误日志。 是的，我这样做是正确的 也没有错误...页面加载但没有出现进度条 @SwagataBarua：MarsOne 的意思是如果你引用了 jQuery 库，不是你的 jquery 代码。 jQuery 是一个 javascript 库，您需要引用它才能使用 jQuery 功能。 好吧，请您对此有所了解。我还是 jquery 的新手。那么你能告诉我如何引用 jquery 库 【参考方案1】：NProgress.js 是一个很酷很简单的库。 Git 存储库是here。它有一个MIT License。
【讨论】：
bower install nprogress 和 bam 我们有 youtube 进度条
请考虑添加库的内联示例用法，而不是仅添加指向资源的第 3 方链接。【参考方案2】：
这是一个完整的 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>
请注意，这针对的是 jQuery 版本 2，它不支持 Internet Explorer 8 和更早版本。如果您需要支持旧的 Internet Explorer 版本，则应改为使用 jQuery 1.10.2。
如果进度条没有显示，但在动画应该完成的四秒后你确实得到了alert("complete")，很可能你对 CSS 的引用是错误的（没有指向正确的地方，或者拼写错误文件名）。
【讨论】：
我将alert("complete"); 替换为$("#progress").hide(); 工作完美！谢谢
页面加载后进度条继续显示。【参考方案3】：
演示：Fiddle
试试下面的代码。您必须将此文件运行到您的 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>
或者：
只需将此文件上传到您的服务器，然后执行该文件。绝对有效。
【讨论】：
我没有投反对票，但应该提到的是，这个解决方案只能在页面加载时工作一次......它还没有“为 ajax 集成做好准备”。需要在ajax( xhr: <set here in function> ); 调用中手动设置“完成”类。此外，还需要一个无过渡样式，它应该禁用动画和过渡，因此#progress.css( width: <width> )（即，将宽度重置为 0%）不会导致您的隐藏加载器显示和动画/过渡一般加载器的重置。 HTH
@NathanSrivi 能否请您给我一个代码的 jsfiddle 链接....只是看看当页面中有多个链接导致加载页面内容时如何使用它。谢谢【参考方案4】：
如果您想要一个真正代表合法页面加载进度的 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' );
...
然后，在你的 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;
现在您应该有一个适用于每个 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');
);
);
最后，
您需要确保将“Content-Length”标头发送到浏览器，以便此设计的加载器正常工作...否则 event.lengthComputable 成员解析为 false...并且没有进展栏将加载。
HTH，请随意编辑不一致之处。
【讨论】：
你能不能发布你的代码的演示版本，我可以运行它，看看它是如何工作的。 如何将“Content-Length”标头发送到浏览器？ 好东西！dd 和 dt 标签应该如何格式化为 #progress？我不相信他们在做任何必要的事情。
@Tim #progress dt 和#progress dd 以及类似的css样式，分别控制dd和dt标签的样式和格式。它们是脉冲效应的一部分。如果您要询问 html 的外观：<div id="progress" class="waiting"><dt></dt><dd></dd></div>
@Mou 'Content-Length' 标头通常由 Web 服务器自动发送。使用 Node.js 等技术时，您可能需要发送响应的“长度”并手动设置 Content-Length 标头，但如果使用反向代理，正在使用的 Web 服务器可能会为您执行此操作（尽管我通过 nginx 使用反向代理时必须发送标头。）我在 mmogp.com 上使用上述加载程序【参考方案5】：
来自 TalkersCode.com 的代码和这里的教程 http://talkerscode.com/webtricks/display-progress-bar-while-page-loads-using-jquery.php
function check_element(ele)
var all = document.getElementsByTagName("*");
var totalele=all.length;
var per_inc=100/all.length;
if($(ele).on())
var prog_width=per_inc+Number(document.getElementById("progress_width").value);
document.getElementById("progress_width").value=prog_width;
$("#bar1").animate(width:prog_width+"%",10,function()
if(document.getElementById("bar1").style.width=="100%")
$(".progress").fadeOut("slow");
);
else
set_ele(ele);
【讨论】：
【参考方案6】：您可以获取进度条的插件 我已经在 GitHub 上发布了
https://github.com/shashibeit/progressbar
您需要在项目中包含并调用以下函数
Progress.start();
Progress.go(20);
Progress.go(30);
Progress.go(80);
Progress.go(100);
Progress.complete();
【讨论】：
以上是关于类似 YouTube 的进度条的主要内容，如果未能解决你的问题，请参考以下文章