上部にナビゲーション バーがあり、ラッパー ボディがある基本的なページがあります。
ユーザーがナビゲーション リンクをクリックするたびに.load
、ページ コンテンツをラッパー div にロードするために使用されます。
$(this).ajaxStart(function(){$('.progressbar .bar').css('width','5%');$('.progressbar').fadeIn();});
$(this).ajaxEnd(function(){$('progressbar').hide();});
$('.ajaxspl').on('click',function(e){
e.preventDefault();
var url=$(this).data('url'),
wrap=$('body #wrap');
//clean the wrapper
wrap.slideUp().html('');
//load page into wrapper
wrap.load(url,function(){wrap.slideDown();});
});
からの戻り値の例.load
:
<div>
...content
</div>
<script>$('.progressbar .bar').css('width','30%');</script>
<link href="/assets/css/datepicker.css" rel="stylesheet" />
<script>$('.progressbar .bar').css('width','60%');</script>
<link href="/assets/css/main.css" rel="stylesheet" />
<script>$('.progressbar .bar').css('width','90%');</script>
<script>//blah blah</script>
ご覧のとおり、私は Bootstrap プログレス バーを表示しajaxstart()
ています。呼び出したページでは、各項目がロードされた後にプログレス バーの値を変更しています。
これは Firefox ではうまく機能し、ページが読み込まれるのを待っている間にプログレス バーを確認できますが、Chrome や IE では機能しません。
これを行うより良い方法はありますか?これを正しく行っていますか、それとも別の方法がありますか?
たとえば、$.ajax
ページ サイズを kb 単位で取得し、データを受信するとその場でプログレス バーを更新しますか?
Gmail が読み込まれているときに、読み込みページに似たものを作成しようとしています。