ウェブサイト検索

イベント - JavaScript - ドキュメントが読み込まれたかどうかを検出する方法 (IE 7/Firefox 3)

ドキュメントが読み込まれた後に関数を呼び出したいのですが、ドキュメントがすでに読み込まれているかまだかはわかりません。もし読み込まれていれば、そのまま関数を呼び出せます。読み込まれていなければ、イベントリスナーを追加できます。onloadがすでに発火した後にイベントリスナーを追加することはできません。なぜなら、その場合は呼び出されないからです。では、ドキュメントが読み込まれたかどうかをどうやって確認すればよいでしょうか？下記のコードを試してみましたが、完全にはうまくいきませんでした。何かアイデアはありますか？

var body = document.getElementsByTagName('BODY')[0];
// CONDITION DOES NOT WORK
if (body && body.readyState == 'loaded') {
    DoStuffFunction();
} else {
    // CODE BELOW WORKS
    if (window.addEventListener) {  
        window.addEventListener('load', DoStuffFunction, false);
    } else {
        window.attachEvent('onload', DoStuffFunction);
    }
}

回答 #1

galambalazs が言及したすべてのコードは必要ありません。純粋な JavaScript でそれをクロスブラウザに行う方法は、単純に document.readyState をテストすることです:

if (document.readyState === "complete") { init(); }

これは jQuery が行う方法でもあります。

JavaScript がどこで読み込まれるかによって、これはインターバル内で行うことができます。

var readyStateCheckInterval = setInterval(function() {
    if (document.readyState === "complete") {
        clearInterval(readyStateCheckInterval);
        init();
    }
}, 10);

実際、document.readyState には三つの状態があります：

ドキュメントが読み込まれている間は「loading」を返し、解析が完了したがサブリソースの読み込み中は「interactive」を返し、完全に読み込まれたら「complete」を返します。 -- Mozilla Developer Network の document.readyState

もし DOM が準備できているだけでよい場合は、document.readyState === "interactive" を確認してください。画像を含むページ全体が準備できている必要がある場合は、document.readyState === "complete" を確認してください。

回答 #2

ライブラリは必要ありません。ちなみに、jQueryはしばらくこのスクリプトを使っていました。

http://dean.edwards.name/weblog/2006/06/again/

// Dean Edwards/Matthias Miller/John Resig

function init() {
  // quit if this function has already been called
  if (arguments.callee.done) return;

  // flag this function so we don't do the same thing twice
  arguments.callee.done = true;

  // kill the timer
  if (_timer) clearInterval(_timer);

  // do stuff
};

/* for Mozilla/Opera9 */
if (document.addEventListener) {
  document.addEventListener("DOMContentLoaded", init, false);
}

/* for Internet Explorer */
/*@cc_on @*/
/*@if (@_win32)
  document.write("<script id=__ie_onload defer src=javascript:void(0)><\/script>");
  var script = document.getElementById("__ie_onload");
  script.onreadystatechange = function() {
    if (this.readyState == "complete") {
      init(); // call the onload handler
    }
  };
/*@end @*/

/* for Safari */
if (/WebKit/i.test(navigator.userAgent)) { // sniff
  var _timer = setInterval(function() {
    if (/loaded|complete/.test(document.readyState)) {
      init(); // call the onload handler
    }
  }, 10);
}

/* for other browsers */
window.onload = init;

回答 #3

おそらく、JSのプログラミングを簡単にするjQueryのようなものを使いたいでしょう。

例えばこんな感じ:

$(document).ready(function(){
   // Your code here
});

あなたが求めていることをしてくれるように見える。

回答 #4

if(document.readyState === 'complete') {
    DoStuffFunction();
} else {
    if (window.addEventListener) {  
        window.addEventListener('load', DoStuffFunction, false);
    } else {
        window.attachEvent('onload', DoStuffFunction);
    }
}

関連記事