ページの読み込みが完了するまでページ読み込みdivを表示する方法

148

集中的な呼び出しを行っているため、ロードが非常に遅いセクションがWebサイトにあります。

私は得ることができますどのように任意のアイデアdivページ自体を準備しながら、表示するために「ロード」に似た何かを言うし、その後、すべての準備が整ったときに消えるために？

javascript  jquery  html  dom  loader 
— シャディアルモスリ
ソース

回答:

215

私はこれを必要としており、いくつかの調査の後にこれを思いつきました（jQueryが必要です）：

まず、<body>タグの直後にこれを追加します。

<div id="loading">
  <img id="loading-image" src="images/ajax-loader.gif" alt="Loading..." />
</div>

次に、divと画像のスタイルクラスをCSSに追加します。

#loading {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: fixed;
  display: block;
  opacity: 0.7;
  background-color: #fff;
  z-index: 99;
  text-align: center;
}

#loading-image {
  position: absolute;
  top: 100px;
  left: 240px;
  z-index: 100;
}

次に、次のJavaScriptをページに追加します（できればページの最後</body>、もちろん終了タグの前に追加します）。

<script>
  $(window).load(function() {
    $('#loading').hide();
  });
</script>

最後に、読み込み中の画像とbackground-colour読み込み中のdiv の位置をスタイルクラスで調整します。

これで問題なく動作します。しかし、もちろん、ajax-loader.gifどこかにある必要があります。景品はこちら。（右クリック>名前を付けて画像を保存...）

— メヒア
ソース
5
別のページにリダイレクトするとき、それは同じページを維持し、突然、目的のページを表示します。次に、ターゲットページだけでなく、前のページにロードペインを表示します。window.onbeforeunload = function（）{$（ '＃loading'）。show（）; }
— Sameh Deabes 2013年
2
+1これは短く、甘くて明確です、大好きです。ただし、そのdivを削除して<img>のみを残します（;
— Francisco Presencia、2014年
3
画像の読み込みに時間がかかります。それまではページが読み込まれます
— Elyor
1
$('#loading').hide();ページの読み込みごとに追加しないようにするには、私の回答をご覧ください。
— rybo111 2016年
このAjaxコードは効果的かつ高速に動作します。smallenvelop.com
— JWC May
36

このスクリプトは、ページの読み込み時にウィンドウ全体をカバーするdivを追加します。CSSのみの読み込みスピナーが自動的に表示されます。（ドキュメントではなく）ウィンドウの読み込みが完了するまで待機し、次にオプションの追加の数秒間待機します。

  • jQuery 3で動作します（新しいウィンドウロードイベントがあります）
  • 画像は必要ありませんが、簡単に追加できます
  • ブランディングや指示を増やすために遅延を変更する
  • 依存関係はjQueryのみです。

https://projects.lukehaas.me/css-loadersからのCSSローダーコード

    
$('body').append('<div style="" id="loadingDiv"><div class="loader">Loading...</div></div>');
$(window).on('load', function(){
  setTimeout(removeLoader, 2000); //wait for page load PLUS two seconds.
});
function removeLoader(){
    $( "#loadingDiv" ).fadeOut(500, function() {
      // fadeOut complete. Remove the loading div
      $( "#loadingDiv" ).remove(); //makes page more lightweight 
  });  
}
        .loader,
        .loader:after {
            border-radius: 50%;
            width: 10em;
            height: 10em;
        }
        .loader {            
            margin: 60px auto;
            font-size: 10px;
            position: relative;
            text-indent: -9999em;
            border-top: 1.1em solid rgba(255, 255, 255, 0.2);
            border-right: 1.1em solid rgba(255, 255, 255, 0.2);
            border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
            border-left: 1.1em solid #ffffff;
            -webkit-transform: translateZ(0);
            -ms-transform: translateZ(0);
            transform: translateZ(0);
            -webkit-animation: load8 1.1s infinite linear;
            animation: load8 1.1s infinite linear;
        }
        @-webkit-keyframes load8 {
            0% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }
            100% {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }
        @keyframes load8 {
            0% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }
            100% {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }
        #loadingDiv {
            position:absolute;;
            top:0;
            left:0;
            width:100%;
            height:100%;
            background-color:#000;
        }
This script will add a div that covers the entire window as the page loads. It will show a CSS-only loading spinner automatically. It will wait until the window (not the document) finishes loading.

  <ul>
    <li>Works with jQuery 3, which has a new window load event</li>
    <li>No image needed but it's easy to add one</li>
    <li>Change the delay for branding or instructions</li>
    <li>Only dependency is jQuery.</li>
  </ul>

Place the script below at the bottom of the body.

CSS loader code from https://projects.lukehaas.me/css-loaders

<!-- Place the script below at the bottom of the body -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
スニペットを展開

— ビクター・ストッダード
ソース
これをimagタグに追加する方法は？
— Mano M
1
@ManoM $(window).on("load", handler)は、画像、スクリプト、iframeを含むすべてのDOMオブジェクトの読み込みが完了したときに発生します。特定の画像が読み込まれるのを待つ場合は、$('#imageId').on("load", handler)
— Victor Stoddard
私にとってこれは、ページが最初にロードされたとき、つまりブラウザ/タブが開かれたり更新されたりしたときにのみ機能します。ただし、ページを開いた後でページを読み込んでいるときは表示されません。さまざまなコンテンツを表示するトグルを備えたページがあり、コンテンツを切り替えると、ロードに時間がかかります。最初にページを開いたときだけでなく、ロードに時間がかかるたびにこの同じコードをロードする方法はありますか？
— Joehat
1
@Joehatをbeforeに置き換え$( "#loadingDiv" ).remove();て$( "#loadingDiv" ).hide();追加$( "#loadingDiv" ).show();しsetTimeout(removeLoader, 2000);ます。ページを軽量化するためにdivを削除しましたが、この修正により再利用可能になりました。
— Victor Stoddard
私はあなたのコードを試してみました。それは奇妙です。ページを呼び出すと、空白のページが表示されます（コンテンツを読み込んでいます）。数秒後（コンテンツが読み込まれたと思います）、ページ全体を表示するよりも2秒間ローダーが表示されます。あなたが見ることができます：criferrara.it/crigest/toshiba
— sunlight76
28 

window.onload = function(){ document.getElementById("loading").style.display = "none" }
#loading {width: 100%;height: 100%;top: 0px;left: 0px;position: fixed;display: block; z-index: 99}

#loading-image {position: absolute;top: 40%;left: 45%;z-index: 100} 
<div id="loading">
<img id="loading-image" src="img/loading.gif" alt="Loading..." />
</div>
スニペットを展開

JSで作成された最も単純なフェードアウト効果のあるページ読み込み画像：

— ダリウスJ
ソース
9

私はこれのための別の簡単な解決策をもう1つ持っていますが、これは完全にうまくいきました。

まず最初に、以下に示すように、GIFのロードとともに透明オーバーレイであるLockonクラスという名前のCSSを作成します。

.LockOn {
    display: block;
    visibility: visible;
    position: absolute;
    z-index: 999;
    top: 0px;
    left: 0px;
    width: 105%;
    height: 105%;
    background-color:white;
    vertical-align:bottom;
    padding-top: 20%; 
    filter: alpha(opacity=75); 
    opacity: 0.75; 
    font-size:large;
    color:blue;
    font-style:italic;
    font-weight:400;
    background-image: url("../Common/loadingGIF.gif");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
}

次に、ページが読み込まれるたびにオーバーレイとしてページ全体をカバーするこのクラスでdivを作成する必要があります

<div id="coverScreen"  class="LockOn">
</div>

次に、ページの準備ができているときはいつでもこのカバー画面を非表示にする必要があります。これにより、ページの準備ができるまでユーザーがイベントをクリック/起動できないように制限できます。

$(window).on('load', function () {
$("#coverScreen").hide();
});

上記のソリューションは、ページが読み込まれているときはいつでも問題ありません。

質問は、ページが読み込まれた後です。ボタンまたは長い時間がかかるイベントをクリックするたびに、以下に示すように、クライアントのクリックイベントにこれを表示する必要があります。

$("#ucNoteGrid_grdViewNotes_ctl01_btnPrint").click(function () {
$("#coverScreen").show();
});

つまり、この印刷ボタンをクリックすると（レポートを表示するには時間がかかります）、カバー画面がGIFで表示され、この結果が表示されます。ページが準備できたら、ロード機能のウィンドウの上に表示され、カバー画面が非表示になります。画面が完全に読み込まれると。

— リノイアショカン
ソース
1
すごい！これらを使用して全画面表示にするだけでした。幅：100vw; 高さ：100vh;
— boateng
6

コンテンツをデフォルトにdisplay:none設定し、display:block完全に読み込まれた後にコンテンツをに設定するイベントハンドラーを用意します。次にdisplay:block、 "Loading"が設定されたdivを設定し、display:none以前と同じイベントハンドラーでに設定します。

— アンバー
ソース
1
これを行うにはどのイベントを使用しますか？JavaScriptページの読み込み？またはより良い場所はありますか？
— マイル
他のJSがページのセットアップを行っているかどうかに依存します。そうであれば、それらが完了した後に呼び出します。そうでない場合、ドキュメントのオンロードは正常に機能します。
— アンバー
2

まあ、これは主に「集中呼び出し」で必要な要素をロードする方法に依存します。私の最初の考えは、それらのロードをajax経由で実行していることです。その場合は、「beforeSend」オプションを使用して、次のようなajax呼び出しを行うことができます。

$.ajax({
  type: 'GET',
  url: "some.php",
  data: "name=John&location=Boston",

  beforeSend: function(xhr){           <---- use this option here
     $('.select_element_you_want_to_load_into').html('Loading...');
  },

  success: function(msg){
     $('.select_element_you_want_to_load_into').html(msg);
  }
});

編集 その場合、jQuery 'display:block'/'display:none'と組み合わせて上記のオプションの1つを使用するの$(document).ready(...)がおそらく最善の方法です。この$(document).ready()関数は、実行前にドキュメント構造全体が読み込まれるのを待ちます（ただし、すべてのメディアが読み込まれるのを待ちません）。あなたはこのようなことをするでしょう：

$(document).ready( function() {
  $('table#with_slow_data').show();
  $('div#loading image or text').hide();
});
— btelles
ソース
残念ながら、それはajaxを介したものではなく、phpスクリプトがデータベースからデータを準備するのを待っているため、いくつかのhtml要素がロードされ、ブラウザは残りのデータをロードする前にデータのテーブルを待機します。これはページが停止したように見える可能性があるため、「何かが起こっている」ことを示し、ユーザーが離れないようにするために何かを表示する必要があります...
— Shadi Almosri
参考：Web（ajaxなし）の原則は、サーバーがページ全体をサーバーサイドでレンダリングし、完了時にこの結果（html）をブラウザーに送信することです。ページのレンダリングが途中で停止した場合（ブラウザーにページが表示されているのが確認できます）、phpはサーバーサイドでしか実行されないため、phpスクリプトにすることはできません。
— ピーター
追加beforeSendとsuccess各ajax呼び出しを回避するには、私の答えを参照してください。
— rybo111 2016年
2

私のブログは100％動作します。

function showLoader()
{
    $(".loader").fadeIn("slow");
}
function hideLoader()
{
    $(".loader").fadeOut("slow");
}
.loader {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url('pageLoader2.gif') 50% 50% no-repeat rgb(249,249,249);
    opacity: .8;
}
<div class="loader">
スニペットを展開

— ジテンドラ・パテル
ソース
1

<div>読み込みメッセージを含む要素を作成し<div>、IDを指定して、コンテンツの読み込みが完了したら、を非表示にし<div>ます。

$("#myElement").css("display", "none");

...またはプレーンJavaScript：

document.getElementById("myElement").style.display = "none";
— スティーブ・ハリソン
ソース
シンプルで、仕事をこなします。読みやすさの観点からする$("#myElement").hide()と、目には簡単ではありませんか？
— user3613932
1

これが私が最終的に使用したjQueryです。これは、すべてのajaxの開始/停止を監視するため、それを各ajax呼び出しに追加する必要はありません。

$(document).ajaxStart(function(){
    $("#loading").removeClass('hide');
}).ajaxStop(function(){
    $("#loading").addClass('hide');
});

読み込みコンテナとコンテンツ（主にmehyaaの回答から）のCSS、およびhideクラス：

#loading {
   width: 100%;
   height: 100%;
   top: 0px;
   left: 0px;
   position: fixed;
   display: block;
   opacity: 0.7;
   background-color: #fff;
   z-index: 99;
   text-align: center;
}

#loading-content {
  position: absolute;
  top: 50%;
  left: 50%;
  text-align: center;
  z-index: 100;
}

.hide{
  display: none;
}

HTML：

<div id="loading" class="hide">
  <div id="loading-content">
    Loading...
  </div>
</div>
— rybo111
ソース
問題は、入力にajaxがロードされたオートコンプリートがある場合、ローダーが表示されることです。
— Lucas
0

@mehyaaの回答に基づくが、はるかに短い：

HTML（の直後<body>）：

<img id = "loading" src = "loading.gif" alt = "Loading indicator">

CSS：

#loading {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 32px;
  height: 32px;
  /* 1/2 of the height and width of the actual gif */
  margin: -16px 0 0 -16px;
  z-index: 100;
  }

JavaScript（jQuery、すでに使用しているため）：

$(window).load(function() {
  $('#loading').remove();
  });
— フランシスコ・プレセンシア
ソース
1
それhide()よりも要素の方が優れているremove()ため、再利用できます。
— rybo111 2016年
0

これは、api呼び出しと同期します。api呼び出しがトリガーされると、ローダーが表示されます。api呼び出しが成功すると、ローダーは削除されます。これは、ページの読み込みまたはAPI呼び出し中に使用できます。

  $.ajax({
    type: 'GET',
    url: url,
    async: true,
    dataType: 'json',
    beforeSend: function (xhr) {
      $( "<div class='loader' id='searching-loader'></div>").appendTo("#table-playlist-section");
      $("html, body").animate( { scrollTop: $(document).height() }, 100);
    },
    success: function (jsonOptions) {
      $('#searching-loader').remove();
      .
      .
    }
  });

CSS

.loader {
  border: 2px solid #f3f3f3;
  border-radius: 50%;
  border-top: 2px solid #3498db;
  width: 30px;
  height: 30px;
  margin: auto;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
  margin-top: 35px;
  margin-bottom: -35px;
}

/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
— スーパーアイ
ソース
0

テーマcustom_theme.themeファイルのdrupalの場合

function custom_theme_preprocess_html(&$variables) {
$variables['preloader'] = 1;
}

本文のメインコンテンツリンクをスキップした後のhtml.html.twigファイル

{% if preloader %} 
  <div id="test-preloader" >
    <div id="preloader-inner" class="cssload-container">
      <div class="wait-text">{{ 'Please wait...'|t }} </div> 
      <div class="cssload-item cssload-moon"></div>
    </div>
  </div>
{% endif %}

CSSファイル

#test-preloader {
position: fixed;
background: white;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 9999;
}
.cssload-container .wait-text {
text-align: center;
padding-bottom: 15px;
color: #000;
}

.cssload-container .cssload-item {
 margin: auto;
 position: absolute;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 width: 131px;
 height: 131px;
 background-color: #fff;
 box-sizing: border-box;
 -o-box-sizing: border-box;
 -ms-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-shadow: 0 0 21px 3px rgba(130, 130, 130, 0.26);
 -o-box-shadow: 0 0 21px 3px rgba(130, 130, 130, 0.26);
 -ms-box-shadow: 0 0 21px 3px rgba(130, 130, 130, 0.26);
 -webkit-box-shadow: 0 0 21px 3px rgba(130, 130, 130, 0.26);
 -moz-box-shadow: 0 0 21px 3px rgba(130, 130, 130, 0.26);
 }

.cssload-container .cssload-moon {
border-bottom: 26px solid #008AFA;
border-radius: 50%;
-o-border-radius: 50%;
-ms-border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
animation: spin 1.45s ease infinite;
-o-animation: spin 1.45s ease infinite;
-ms-animation: spin 1.45s ease infinite;
-webkit-animation: spin 1.45s ease infinite;
-moz-animation: spin 1.45s ease infinite;
 }
— プラディープ
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.