ブートストラップ・ページロード・プログレス・バー・アニメーション

Question

divにロードされたページをロードして、進行中のバー（実際にはページロードの実際の進行に近い）を表示してから、ページがロードされた後slideUpバーを表示してコンテンツを表示します。イベントの

現在チェーン：

1. ユーザクリックが
2. プログレスバースライドダウン
3. プログレスバーが
ページの読み込み
5. プログレスバースライド最大ページのコンテンツを表示

をアニメーション化リンク

コード：

function pageLoad(url){ 
    $('body').css('cursor','wait'); 
    $('#page-load-wrap').slideDown(); 
    width = $('#page-load-indicator').css('width','100%'); 
    $('#mainframe').load(url,function(){ 
     $('#page-load-wrap').slideUp(); 
     $('body').css('cursor','default'); 
    }); 
} 

1. どのように私は、リソース負荷の実際の進行状況を一致させるために、このコードを変更しますか？
2. コンテンツが表示される前にdivをslideUpする方法はありますか？

======= ======= EDIT私はちょうど成功に続いget関数の呼び出し 前の80％に幅を設定し、以下の答えのコードを使用して

それを100％に設定してください。 divアップをスライドさせ、その後、HTMLはどのようにリソース負荷の実際の進行状況を一致させるために、このコードを変更しますか？

 function pageLoad(url){ 
       $('body').css('cursor','wait'); 
       $('#mainframe').html(''); 
       $('#page-load-wrap').slideDown(); 
       $('#page-load-indicator').css('width','80%'); 

       $.get(url,function(data){ 
       $('#page-load-indicator').css('width','100%'); 
       $('#page-load-wrap').slideUp('slow',function(){ 
        $('#mainframe').html(data); 
       }); 
       $('body').css('cursor','default'); 
       }); 
      } 

Answer 1

を表示

あなたはちょうどjavascriptで禁止します。

コンテンツが表示される前にdivをスライドアップするにはどうすればよいですか？

利用代わり$.getそれはあなたが内容を設定する前に、上にスライドすることができますので、：

function pageLoad(url){ 
    $('body').css('cursor','wait'); 
    $('#page-load-wrap').slideDown(); 
    width = $('#page-load-indicator').css('width','100%'); 

    $.get(url,function(data){ 
     $('#page-load-wrap').slideUp(); 
     $('body').css('cursor','default'); 

     // and load the html 
     $('#mainframe').html(data); 
    }); 
}