これに似たものが必要です->
jQueryでロードスピナーを表示するには? jQuery .load() 関数を使用して div コンテンツも呼び出すためです。
しかし、写真を表示する代わりに、進行状況バーを表示したいと思います。そのため、そのリクエストの進行状況を監視する必要があります。
出来ますか?どうやってやるの?
これに似たものが必要です->
jQueryでロードスピナーを表示するには? jQuery .load() 関数を使用して div コンテンツも呼び出すためです。
しかし、写真を表示する代わりに、進行状況バーを表示したいと思います。そのため、そのリクエストの進行状況を監視する必要があります。
出来ますか?どうやってやるの?
あなたが示した例では、ajaxStartとajaxReadyのみを使用しており、進行状況は使用していません。私の知る限り、jQuery を介して呼び出しの進行状況を判断する方法はありません。
Hiya DEMO http://jsfiddle.net/5ZRfY/ ==> http://jsfiddle.net/je5qchss/
このようなものかもしれません。ここを参照してください: http://api.jquery.com/ajaxComplete/ または http://api.jquery.com/ajaxSuccess/ および http://api.jquery.com/jQuery.ajax/ (よく読んでください) )
ajax が正常に終了したら、いつでも呼び出しを開始および停止できます。
Jクエリコード
$(document).ready(function() {
$('#progressBar').append('<div id="bar"></div>');
// percentage of completion
var progress = '100%';
// Animate the #bar div
$('#bar').animate({
width: progress
}, 400);
});
HTML
<div id='progressBar'></div>
CSS
body{
background:#f6f6f6;
}
/*Styling of progress bar container*/
#progressBar{
width:300px;/*It is important to define the width of the progress bar*/
height:40px;
padding:0px;
background:#ccc;
border:1px solid #aaa;
-moz-box-shadow: inset 0 0 3px #888;
-webkit-box-shadow: inset 0 0 3px #888;
box-shadow: inset 0 0 3px #888;
}
/*styling the progress bar*/
#bar{
background:#499aed;
height:100%;
width:0; /*sets the bar to 0*/
}