☰

ページが読み込まれるまで読み込みアイコンを表示しますか? 質問する

tag-icon • tag-icon javascript html css
ページが読み込まれるまで読み込みアイコンを表示しますか? 質問する

ページ要素が完全に読み込まれるまで、ユーザーに読み込み中アイコンを表示したいです。これを JavaScript で実現するにはどうすればいいですか? また、これを jQuery ではなく JavaScript で実現したいのですが。

こここれは Google がどのように行うかを示すリンクです。これをどのように実行できますか? onload イベントで何らかの機能をトリガーするなど... このように実行されることはわかっていますが、他の方法でも実行できますか? または、そのためのイベントはありますか?

アップデート私は display プロパティを使用して何かを行いました。body 要素を非表示にし、body タグの onload でそのプロパティを変更して、読み込みアイコンを配置する場所を変更し、よりインタラクティブ性を追加します。

ベストアンサー1

html

<body>
    <div id="load"></div>
    <div id="contents">
          jlkjjlkjlkjlkjlklk
    </div>
</body>

JS

document.onreadystatechange = function () {
  var state = document.readyState
  if (state == 'interactive') {
       document.getElementById('contents').style.visibility="hidden";
  } else if (state == 'complete') {
      setTimeout(function(){
         document.getElementById('interactive');
         document.getElementById('load').style.visibility="hidden";
         document.getElementById('contents').style.visibility="visible";
      },1000);
  }
}

CS

#load{
    width:100%;
    height:100%;
    position:fixed;
    z-index:9999;
    background:url("/loading.gif") no-repeat center center rgba(0,0,0,0.25)
}

注記：
ページの読み込みが速い場合は読み込みGIFは表示されません。そのため、読み込み時間が長いページでこのコードを使用してください。また、jsページの下部にあります。

デモ

http://jsfiddle.net/6AcAr/- タイムアウトあり(デモのみ)
http://jsfiddle.net/47PkH/- タイムアウトなし(実際のページで使用)

アップデート

http://jsfiddle.net/d9ngT/

おすすめ記事