如果您想要一个类似于YouTube的加载器，用于您的AJAX应用程序，并且实际上代表了合法的页面加载进度，请考虑以下解决方案（基于Nathan Srivi的答案）：
在您的`.ajax()`方法中：
$.ajax
(
{
...
xhr: function()
{
var xhr = new window.XMLHttpRequest();
xhr.upload.addEventListener
(
"progress",
function( event)
{
if( event.lengthComputable )
{
var percentComplete = Math.round( ( ( event.loaded / event.total ) * 100 ) );
$( '#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
);
xhr.addEventListener
(
"progress",
function( event )
{
if( event.lengthComputable )
{
var percentComplete = Math.round( ( ( event.loaded / event.total ) * 100 ) );
$( '#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 )
{
...
$( '#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…此时进度条将无法加载。希望对您有所帮助，如有不一致之处，请随意编辑。
document.ready中？在fiddle中，你不一定需要这样做。 - kayen