メッセージを読み込んでいます

Question

jsスクリプトを検索すると、いくつかのメッセージ（<！> quot;読み込み中、しばらくお待ちください<！> quot;）ページがすべての画像を読み込むまで strong>。

重要- jsフレームワークを使用してはなりません（jquery、mootoolsなど）、通常のjsスクリプトである必要があります。

ページがロードされるとメッセージが消える必要があります。

Answer 1

はい、古い質問です！ これは、画像のプリロードに使用していた当時に遡ります...

とにかく、ここにいくつかのコードがあります。魔法は<！> quot; complete <！> quot;です。 document.imagesコレクション（Imageオブジェクト）のプロパティ。

// setup a timer, adjust the 200 to some other milliseconds if desired
var _timer = setInterval("imgloaded()",200); 

function imgloaded() {
  // assume they're all loaded
  var loaded = true;

  // test all images for "complete" property
  for(var i = 0, len = document.images.length; i < len; i++) {
    if(!document.images[i].complete) { loaded = false; break; }
  }

  // if loaded is still true, change the HTML
  if(loaded) {
    document.getElementById("msg").innerHTML = "Done.";

    // clear the timer
    clearInterval(_timer);
  }
};

もちろん、これはどこかにDIVがスローされていることを前提としています：

<div id="msg">Loading...</div>

Answer 2

ページに静的な<div>を追加して、ページがロードされていることをユーザーに通知します。次に、window.onloadハンドラーを追加し、divを削除します。

ところで、何<！>＃8217;この理由は？ Don <！>＃8217;ユーザーは既にブラウザにページ読み込みインジケータを持っていますか？

Answer 3

画像に対して非同期ajaxリクエストを行い、完了したらコールバックを追加する必要があります。
これを説明するためのコードを次に示します。

var R = new XMLHttpRequest();
R.onreadystatechange = function() {
  if (R.readyState == 4) {
    // Do something with R.responseXML/Text ...
    stopWaiting();
  }
};

Answer 4

理論的には、すべての画像がロードされているかどうかをチェックする関数を実行するすべての画像オブジェクトにonloadイベントを設定できます。この方法では、setTimeOut（）は必要ありません<！>＃180; t。ただし、画像がロードされなかった場合、これは失敗しますので、onerrorも考慮する必要があります。