190

私のウェブサイトには、集中的な呼び出しを行っているため、読み込みが非常に遅いセクションがあります。

divページが準備されている間に表示し、すべての準備が整うと消える「読み込み中」に似たものをどのように言うことができるか考えてみてください。

4

13 に答える 13

271

元の回答

私はこれを必要としており、いくつかの調査の結果、これを思いつきました( jQueryが必要です):

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

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

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

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

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

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

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

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

これで、問題なく動作するはずです。ただし、もちろん、画像の値ajax-loader.gifにどこかを指定するか、base64 URL を使用する必要があります。src景品はこちら。(右クリック > 名前を付けて画像を保存...)

アップデート

jQuery 3.0 以降では、以下を使用できます。

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

アップデート

元の答えはjQueryからのもので、フレックスボックス時代より前です。Angular、React、Vue.js など、多くのビュー管理ライブラリ/フレームワークを使用できるようになりました。また、CSS には flexbox オプションがあります。以下は CSS の代替です。

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

#loading-image {
  z-index: 100;
}
于 2010-09-01T11:49:39.700 に答える
35 

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

于 2012-10-07T10:14:57.750 に答える
6

内容をデフォルトに設定し、完全にロードされた後に内容をまたは同様にdisplay:none設定するイベントハンドラーを設定します。display:block次にdisplay:block、「Loading」が含まれるように設定されたdivを用意しdisplay:none、前と同じイベントハンドラーでに設定します。

于 2009-12-05T22:28:29.343 に答える
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();
});
于 2009-12-05T22:41:57.087 に答える
2

これは、すべての ajax の開始/停止を監視する最終的に使用した jQuery です。そのため、各 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>
于 2016-03-04T16:39:13.903 に答える
1

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

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

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

document.getElementById("myElement").style.display = "none";
于 2009-12-05T22:34:45.573 に答える
1

これは、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); }
}
于 2020-06-01T00:02:52.123 に答える