Clever Geek Handbook

AJAXアプリケーション用の本格的なJSプリローダーを作成する

多くのプログラマーはJavaScriptとCSSを最適化して、ページの読み込みを高速化します。

しかし、それらのすべてが、ユーザーに主観的に高速なダウンロードの効果を与えるプリローダーを作成するわけではありません。



メソッド番号1。 安くて陽気な。

アイデアは単純です-ページをまだロードしていることをユーザーに示す画像を中央に配置する必要があります。 コードは非常に単純で、<body>の直後に記述します。



< div id ="preloaderbg" class ="centerbg1" > < div class ="centerbg2" > < div id ="preloader" ></ div > </ div > </ div > < script type ="text/javascript" > document .getElementById( 'preloaderbg' ).style.display = 'block' ; document .body.style.overflow = 'hidden' ; </ script > * This source code was highlighted with Source Code Highlighter .



  1. < div id ="preloaderbg" class ="centerbg1" > < div class ="centerbg2" > < div id ="preloader" ></ div > </ div > </ div > < script type ="text/javascript" > document .getElementById( 'preloaderbg' ).style.display = 'block' ; document .body.style.overflow = 'hidden' ; </ script > * This source code was highlighted with Source Code Highlighter .



  2. < div id ="preloaderbg" class ="centerbg1" > < div class ="centerbg2" > < div id ="preloader" ></ div > </ div > </ div > < script type ="text/javascript" > document .getElementById( 'preloaderbg' ).style.display = 'block' ; document .body.style.overflow = 'hidden' ; </ script > * This source code was highlighted with Source Code Highlighter .



  3. < div id ="preloaderbg" class ="centerbg1" > < div class ="centerbg2" > < div id ="preloader" ></ div > </ div > </ div > < script type ="text/javascript" > document .getElementById( 'preloaderbg' ).style.display = 'block' ; document .body.style.overflow = 'hidden' ; </ script > * This source code was highlighted with Source Code Highlighter .



  4. < div id ="preloaderbg" class ="centerbg1" > < div class ="centerbg2" > < div id ="preloader" ></ div > </ div > </ div > < script type ="text/javascript" > document .getElementById( 'preloaderbg' ).style.display = 'block' ; document .body.style.overflow = 'hidden' ; </ script > * This source code was highlighted with Source Code Highlighter .



  5. < div id ="preloaderbg" class ="centerbg1" > < div class ="centerbg2" > < div id ="preloader" ></ div > </ div > </ div > < script type ="text/javascript" > document .getElementById( 'preloaderbg' ).style.display = 'block' ; document .body.style.overflow = 'hidden' ; </ script > * This source code was highlighted with Source Code Highlighter .



  7. < div id ="preloaderbg" class ="centerbg1" > < div class ="centerbg2" > < div id ="preloader" ></ div > </ div > </ div > < script type ="text/javascript" > document .getElementById( 'preloaderbg' ).style.display = 'block' ; document .body.style.overflow = 'hidden' ; </ script > * This source code was highlighted with Source Code Highlighter .



  8. < div id ="preloaderbg" class ="centerbg1" > < div class ="centerbg2" > < div id ="preloader" ></ div > </ div > </ div > < script type ="text/javascript" > document .getElementById( 'preloaderbg' ).style.display = 'block' ; document .body.style.overflow = 'hidden' ; </ script > * This source code was highlighted with Source Code Highlighter .



  9. < div id ="preloaderbg" class ="centerbg1" > < div class ="centerbg2" > < div id ="preloader" ></ div > </ div > </ div > < script type ="text/javascript" > document .getElementById( 'preloaderbg' ).style.display = 'block' ; document .body.style.overflow = 'hidden' ; </ script > * This source code was highlighted with Source Code Highlighter .



  10. < div id ="preloaderbg" class ="centerbg1" > < div class ="centerbg2" > < div id ="preloader" ></ div > </ div > </ div > < script type ="text/javascript" > document .getElementById( 'preloaderbg' ).style.display = 'block' ; document .body.style.overflow = 'hidden' ; </ script > * This source code was highlighted with Source Code Highlighter .



< div id ="preloaderbg" class ="centerbg1" > < div class ="centerbg2" > < div id ="preloader" ></ div > </ div > </ div > < script type ="text/javascript" > document .getElementById( 'preloaderbg' ).style.display = 'block' ; document .body.style.overflow = 'hidden' ; </ script > * This source code was highlighted with Source Code Highlighter .







CSSコード：







  1. .centerbg1 {
  2. ディスプレイ：なし;
  3. 幅：100％;
  4. 高さ：100％;
  5. 位置：絶対;
  6. top：0px;
  7. 左：0px;
  8. z-index：1000;
  9. 背景：url（ ' /design/im/texture1.jpg'）＃3c363e;
  10. }
  12. .centerbg2 {
  13. 位置：絶対;
  14. 左：50％;
  15. トップ：50％;
  16. }
  18. #preloader {
  19. 上：-50％;
  20. 左：-50％;
  21. 位置：相対;
  22. 幅：333px;
  23. 高さ：26px;
  24. 背景：url（ '/content/pages/articles/preloaders/bg2.gif' ）;
  25. ボーダー：ソリッド＃edda3d 2px;
  26. }
*このソースコードは、 ソースコードハイライターで強調表示されました。




その結果、ロード直後に、ページの中央にアニメーションの進行状況バーが付いたブロックが表示されます。 スクロールバーが表示されず、ユーザーがスクロールダウンしてページのコンテンツを表示できないように、オーバーフローパラメーターを変更する必要があります。



次に、すべてがロードされたら、プリローダーを削除してオーバーフローを可視に設定する必要があります。







  1. document .getElementById（ 'loaderbg' ）.style.display = 'none' ;
  2. document .body.style.overflow = 'visible' ;
*このソースコードは、 ソースコードハイライターで強調表示されました。




コードのこの部分を、JS関数を含むファイル、plreloader1.jsに入れます



アニメーションGIF画像からプログレスバーを作成すると、重すぎて、場合によっては配置されているページ自体よりも大きくなることがあります。

したがって、ストリップ（1つなど）を描画し、IDプリローダーでブロックの背景として配置し、タイマーで背景の位置を移動することをお勧めします。







  1. <script type = "text / javascript" >
  2. document .getElementById（ 'loaderbg' ）.style.display = 'block' ;
  3. document .body.style.overflow = 'hidden' ;
  4. pbPos = 0;
  5. pbInt = setInterval（ function （）{
  6. document .getElementById（ ' preloader ' ）.style.backgroundPosition = ++ pbPos + 'px 0' ;
  7. }、25）;
  8. </ script>
*このソースコードは、 ソースコードハイライターで強調表示されました。




そして、ロード後にこれを行います。





  1. clearInterval（pbPos）;
  2. document .getElementById（ 'loaderbg' ）.style.display = 'none' ;
*このソースコードは、 ソースコードハイライターで強調表示されました。




仕事の結果はここで見つけることができます 。



この方法には欠点があります-プリロードをonloadに非表示にすると、つまり すべての画像が読み込まれるまで待つと、ユーザーはページがハングしたと思うかもしれません。実際、アニメーション以外は何も起こりません。 jQueryから$（document）.ready（）にハングアップすると、プリローダーが消えた後、画像のみがロードされます。



したがって、使用することが提案されています...



メソッド番号2。 真実は近くのどこかにあるか、ジェダイが反撃する。

まず、2つのロードバンドを描画します-アクティブではなく、非常に。



非アクティブストリップ

アクティブレーン



それを背景として非アクティブに設定し、アクティブを歌姫の背景として設定します。このため、負荷の割合に応じて幅を変更します。







  1. < div id = "loaderbg" class = "centerbg1" >
  2. < div class = "centerbg2" >
  3. < div id = "preloader" >
  4. < img alt = "読み込み中..." src = "/ design / im / progbar_ph.gif" />
  5. < div id = "progbarfg" > </ div >
  6. </ div >
  7. </ div >
  8. </ div >
*このソースコードは、 ソースコードハイライターで強調表示されました。




progbar_ph.gifは高さ1ピクセルの画像で、スクロールバーの幅です（この例はIEが含まれていないバグです。プログレスバーでdivを中央に配置する別の方法はまだ見つかりません）。

スタイルは、前の方法と同じですが、

#progbarfg {width: 0px; background: url('/design/im/progbar_fg.png')}







現在、サイトのコンテンツと画像を動的にロードする小さなスクリプトを作成する必要があります。 使用されているフレームワークおよび他のJSファイルがダウンロードされる前であっても、進行状況バーが表示および変更されるようにするために必要です。



完全にAJAXで作成された平均的なサイトをご覧ください。 おおよそのダウンロードは次のようになります。



このすべて（CSSとHTMLを除く）に、たとえば単位などのバイト単位の重み（または条件付き重み）を割り当て、各ファイルの読み込み（または関数の実行）に応じて進行状況バーを移動します。



2つのメソッドを実装しました。最初のメソッドは単純で、次のようにオンになります。

</ body>の直前に次のように記述します。



< script type ="text/javascript" >

dLoader.start( 'progbarfg' , 333, 'count' );

</ script >







最初のパラメーターはアクティブな読み込みバーを背景とするブロックの識別子、2番目は画像の幅、3番目のパラメーターはコンテンツの重みを考慮する方法です。



スクリプトはページ上のすべての写真をスキャンし、それらに1の重みを割り当てます。以下で説明するように、すべてのJSファイルはその本文に登録されます。

ただし、コンテンツの各ユニットの重みはユニットではなく、バイト単位の実ボリュームにする必要があります。 そして、AJAXアプリケーションの場合、スケジュール全体をすぐにロードしたいと思います。



これを行うために、デザインイメージを使用してフォルダーをスキャンし、ファイルサイズのすべてを配列に入れ、必要に応じて圧縮するスクリプトをPHPで作成しました。



したがって、次を</ body>に追加すると、ページ上のすべてのコンテンツの読み込みの進行状況を示す進行状況バーが表示され、その後は徐々に消えます。







  1. <script type = "text / javascript" >
  2. dLoader.start（ 'mainprogbarfg' 、333、 'size' 、 function （）{$（ '#preloaderbg' ）.fadeOut（250）;}）;
  3. </ script>
*このソースコードは、 ソースコードハイライターで強調表示されました。




すべてのJSファイルがロードされると、invoke配列内の関数が起動されます。 jQueryを使用してコンテンツをロードすると、関数は次のようになります。







  1. 関数 fn（callBack）{
  2. $ .get（ '/' 、 params 、 function （data）{someHandler（data）; eval（callBack）;}）;
  3. }
*このソースコードは、 ソースコードハイライターで強調表示されました。




PHPスクリプトは、次のことを行います。必要なスクリプトとそのサイズ、および写真と追加機能を配列に入れます。 コード：







  1. $ data [ 'js' ] = 配列 （
  2. 配列 （ 'path' => 'jquery-1.2.6.min.js' 、 'size' => filesize（$ jsRoot。 '/jquery-1.2.6.min.js' ））、
  3. 配列 （ 'path' => 'functions.js' 、 'size' => filesize（$ jsRoot。 '/functions.js' ））
  4. ）;
  5. $ data [ 'im' ] = GetFiles（$ imgRoot、 true ）;
  6. $ data [ 'invoke' ] [] = array （
  7. 'action' => 'loadTemplates' 、
  8. 'size' => GetDirSize（dirname（__ FILE__）。 '/ design / ajax templates /' 、 false ）
  9. ）;
  10. $ data [ 'jspath' ] = '/ design / js /' ;
  11. $ data [ 'impath' ] = '/ design / im' ;
*このソースコードは、 ソースコードハイライターで強調表示されました。




すべての画像とJSファイルがロードされた後、dLoader.start（）関数で指定したonLoadイベントが発生します



ブートプロセスをカスタマイズする方法はまだあります。







  1. dLoader.userProgress = function （bytesLoaded、totalBytes）{doSmth（）; }
*このソースコードは、 ソースコードハイライターで強調表示されました。




これを使用するには、パスとJSライブラリを記述してPHPスクリプトを編集し、それを実行してブートローダースクリプトを生成する必要があります。その後、単一のスクリプトで<head>に記述する必要があります。

2番目のオプションの実際の例はこちらです。



スクリプトを含むアーカイブはここから取得できますが、それがすべてどのように機能するかを確認するために- 私のサイトで 。



Internet Explorer 6/7、Firefox 3、Opera 9.5、Safari 3.2.1で動作します



提案や提案は大歓迎です:)



記事の準備にご協力いただきありがとうございますwaitekkは彼にカルマを注いでいますが、私はまだハーブを持っています


More articles:


All Articles