web-dev-qa-db-ja.com

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

私は私達のウェブサイトのそれがある集中的な電話をしているのでかなりゆっくりロードするセクションを持っています。
ページが準備されている間に "loading"に似たことを示すdivを表示して、準備ができたら消える方法を教えてください。

javascriptjqueryhtmldom
121
Shadi Almosri

私はこれを必要としていました、そしてインターネットに関するいくつかの調査の後に私はこれを思い付きました（jQueryが必要です）：

Bodyタグの直後にこれを追加します。

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

次にdivとimageのスタイルクラスを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 language="javascript" type="text/javascript">
     $(window).load(function() {
     $('#loading').hide();
  });
</script>

次に、ヘルプスタイルクラスを使用して、読み込み中の画像の位置と読み込み中のdivの背景色を調整します。

これはそれです、ちょうどうまく働きます。しかし、もちろんあなたはどこかにajax-loader.gifを持っている必要があります。

182
mehyaa
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で作成された最も単純な フェードアウト 効果を持つページ読み込み画像：

24
Dariusz J

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

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

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

    
$('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 screen 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>
23
Victor Stoddard

私は完全に私のために働いたこのための別の以下の簡単な解決策があります。

まず最初に、名前がLockonクラスのCSSを作成します。このクラスは、次のようにGIFをロードすると同時に透明なオーバーレイです。

.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を使用してカバー画面が表示されます。this 結果が表示され、ロード時にウィンドウがウィンドウの上に表示されると、画面が完全にロードされるとカバー画面が非表示になります。

6
Rinoy Ashokan

内容をデフォルトでdisplay:noneに設定し、それが完全にロードされた後にdisplay:blockまたは同様の値に設定するイベントハンドラを使用します。それから、 "Loading"が入ったdisplay:blockに設定されたdivを持って、以前と同じイベントハンドラでそれをdisplay:noneに設定します。

6
Amber

まあ、これは主に '集中呼び出し'に必要な要素をどのようにロードしているかに依存します。私の最初の考えはあなたが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);
  }
});

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

$(document).ready( function() {
  $('table#with_slow_data').show();
  $('div#loading image or text').hide();
});
2
btelles

私のブログは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">
2
Jitendra Patel

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

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

コンテナとコンテンツをロードするためのCSS（大部分はmehyaaの回答からのもの）と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>
1
rybo111

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

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

...またはプレーンなJavaScriptの場合：

document.getElementById("myElement").style.display = "none";
1
Steve Harrison

@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();
  });
0
Francisco Presencia