1. ホーム
  2. 質問と答え
  3. jQueryを使用してpage_loadにページのプログレスバーを作成するにはどうすればよいですか？

jQueryを使用してpage_loadにページのプログレスバーを作成するにはどうすればよいですか？

2011-01-02 25 views

答えて

1

すべてのスクリプト、テキスト、画像がページに読み込まれるまで、gifアニメーションを表示するようなものですか？

私はキーがドキュメントの準備ができてイメージのロードイベントでjQueryを使用していると思います。 すべてのテキストとスクリプトがロードされた後、ドキュメントの準備ができます。これは、すべてのイメージがロードされる前に発生する可能性があります（特に大きなもの）。 画像のloadイベントの使用の出番です

また、あなたはこのように見て、あなたのhtmlコードをリファクタリングする必要があります。

  • 可能な場合は先頭から任意のスクリプトタグを削除し、体内に配置します。
  • メタタグとスタイルシートのリンクを頭に入れます。
  • body内に#loader div（すべてのマークアップとスタイルが必要）を作成し、通常のHTMLコンテンツを配置し、jsライブラリをインクルードします。
  • 最後に、ドキュメントの準備とイメージの読み込み終了を確認するjavascriptをセットアップします。

これは非常に単純な例である：すなわち、画像は、CSS背景画像properyを取り付けるためのjQueryを使用して、次にプリロードすることによって解決することができるが、これは、ローディング背景画像の問題を解決しないこと

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Loader</title> 
     <meta content="text/html;charset=utf-8" http-equiv="Content-Type" /> 
     <!-- only style scripts and other meta tags except js libs may be put here --> 
    </head> 
    <body> 
     <div id="loader" style="background:red; width:50px; height:50px; position: fixed; margin: auto auto;"></div> 
     <!-- all other tags, images and js libraries must be included after "loader" div --> 
     <h1>This is loader demo</h1> 
     <p>Cras ultricies; orci vel adipiscing tempus, dui nisl faucibus urna, id viverra felis felis et dolor. Sed eget tellus et dolor volutpat viverra. Donec auctor sem eu sapien facilisis auctor? 
     <img id="very-big-image" style="float:left; padding: 10px;" src="http://upload.wikimedia.org/wikipedia/commons/e/e5/Chrysler_Building_Midtown_Manhattan_New_York_City_1932.jpg" alt="Manhattan high resolution" width="600" /> 
     </p> 
     <p> 
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer vehicula lacus id nulla porta eget tristique risus laoreet. Suspendisse condimentum sodales neque quis tempor? 
</p> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
<script type="text/javascript"> 
     var imgs_loaded = 0; 
     var imgs_count = 0; 

     // Document ready will be triggered only after all scripts are loaded. 
     // Document ready may get triggered even before all images are loaded, so we have to manualy check if all images are loaded 
     $(document).ready(function(){ 
      window.imgs_count = $('img').length; // first count how many images there is 
      if(window.imgs_count){ // if any image exists do the loading check 
       $('img').load(afterImageLoad); 
      } 
      else { // if no images just hide #loader 
       $('#loader').hide(); // or .remove() 
      } 
     }); 

     function afterImageLoad(){ 
      window.imgs_loaded++; 
      if(window.imgs_count == window.imgs_loaded){ // if all images loaded 
       $('#loader').hide(); // or .remove() 
      } 
     } 
</script> 
    </body> 
</html>

お知らせ背景画像を使用するすべての要素に手動で対応します。

これがあなたの問題を解決することを願っています。

Ivan

出典

2011-01-02 11:28:27

関連する問題

 関連する問題