JavaScriptはウェブページのロードの進捗バーのコードを実現して超簡単です

2413 ワード

Webプログレスバーは、現在のWebページのロードの進捗状況をよりよく反映し、loadingプログレスバーはアニメーションの形式で0%から100%までWebページのロードを完了することができます.しかし、現在のブラウザでは、ページのロードの進捗に関するインタフェースは提供されていません.つまり、ページが実際のロードの進捗に正確に戻ることはできません.本稿では、jQueryを使用してページのロード進捗バー効果を実現します.
HTML
まず、ロード中のオブジェクトのサイズを直接取得できるブラウザはありません.したがって、データサイズによって0～100%のロード表示プロセスを実現することはできません.
したがってhtmlコードの逐行ロードの特性により,ページコード全体のいくつかのジャンプ行数にノードを設定し,おおよその曖昧な進捗フィードバックを行い,進捗ロードの効果を実現する必要がある.ページが指定された領域にロードされるたびに(n)%の進捗結果が返され、複数のノードを設定することで、ロードの進捗を一歩一歩表示する目的が達成される.
ページが1つある場合、ブロックごとにヘッダー、左側の内容、右側のサイドバー、フッターの4つの部分に分けられます.この4つの部分を4つのノードとして使用します.ページが各ノードをロードした後、大体のロード率を設定します.ページ構造は次のとおりです.

次の行に進捗バーを追加しますloading.

CSS

我们要设置loading进度条的样式，设置背景色，高度，以及位置，优先级等。


.loading{ 
 background:#FF6100; //         
 height:5px; //         
 position:fixed; //            
 top:0; //            
 z-index:99999 //          ，         
}

jQuery
次に、各ノードの後ろに進捗アニメーションを追加し、jQueryを使用して実現します.


 
     
 
 $('.loading').animate({'width':'33%'},50); 
 //        
 
 
     
 
 
 $('.loading').animate({'width':'55%'},50); 
//        
 
 
     
 
 
 $('.loading').animate({'width':'80%'},50); 
//        
 
 
     
 
 
 $('.loading').animate({'width':'100%'},50); 
 //

1つのノードをロードしなかった後、jQueryはanimate()アニメーションメソッドを呼び出して進捗バー幅の変化を実現し、各ノードの変化は50ミリ秒で進捗バーをよりスムーズに見せ、最終的に0%から100%に変化させ、進捗バーの進捗アニメーションを完了したことがわかります.
進捗バーが100%に達すると、ページのロードが完了し、最後に進捗バーを隠すステップがあります.


$(document).ready(function(){ 
 $('.loading').fadeOut();  
});

zTreeが非同期でツリーをロードして初期化したときにすべて展開

どのようにreactでOrgChartを使用しますか?