如果您想要一个真正代表合法页面加载进度的 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，请随意编辑不一致之处。