我正在尝试制作类似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');
}
});
我还包括jsFiddle的http://jsfiddle.net/ajaSB/3/。
在这个jsfiddle中,会出现进度条,但是当我在IDE中使用相同的代码并运行该文件时,不会出现进度条。我究竟做错了什么?或者,如果有另一种方法可以获得酒吧?
答案 0 :(得分:30)
NProgress.js是一个非常酷且简单的库。 Git存储库是here。它有一个MIT License。
答案 1 :(得分: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>
请注意,这是针对jQuery的第2版,它不支持Internet Explorer 8及更早版本。如果您需要支持旧的Internet Explorer版本,则应该改为使用jQuery 1.10.2。
如果进度条没有显示,但是你应该在完成动画的四秒钟之后得到alert("complete")
,那么你对CSS的引用很可能是错误的(没有指向正确的位置,或拼写错误的文件名。)
答案 2 :(得分:10)
演示: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>
或者:
只需将此文件上传到您的服务器,然后执行该文件即可。绝对有效。
答案 3 :(得分:5)
LoadingBar.js:在您的网站上添加类似YouTube的加载栏
YouTube最近在页面顶部添加了一个红色加载栏,表示正在加载下一页。您可能想知道为什么他们不依赖于浏览器的加载栏。那是因为下一页正在加载Ajax,它不会触发正常的页面加载机制。这就是为什么浏览器没有拿起它。正如你们中的一些人所知,通过Ajax加载整个内容可以使你的网站加载速度比正常方式更快。</ p>
这是因为所有静态内容都保持不变,只加载了动态内容。这样,您就不必一直向服务器询问静态内容,这些内容永远不会一次又一次地改变,从而产生过载。
<强> DEMO 强>
为网络创建类似YouTube的加载栏
正如Dmitry Fadeyev在UsabilityPost上发表的一篇博文中所提到的,许多开发人员正在越来越多地将这种UI模式集成到他们的网站中。今天我决定构建一个jQuery插件,它允许你为你网站上的任何Ajax链接添加一个加载栏。让我告诉你它是如何工作的。
基本用法
HTML标记
<a href="<<URL>>" class="ajax-call">..</a>
<div id="loadingbar-frame"></div>
<强> 的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) {}
});
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;
}
就是这样。现在,您将拥有一个用于所有Ajax调用的强大加载栏。我希望你喜欢这个:)
答案 4 :(得分: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' );
...
}
然后,在你的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,随时可以编辑不一致的内容。
答案 5 :(得分:1)
答案 6 :(得分:1)
来自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);
}
}
答案 7 :(得分:0)
您可以获取进度条的插件
我已经在GitHub上发布了它
https://github.com/shashibeit/progressbar
您需要在项目中加入并调用以下函数
Progress.start();
Progress.go(20);
Progress.go(30);
Progress.go(80);
Progress.go(100);
Progress.complete();