Javascript - ドキュメントが読み込まれたかどうかを検出する方法（IE 7/Firefox 3）

Question

ドキュメントが読み込まれた後に関数を呼び出すが、ドキュメントの読み込みが完了していない場合があります。それがロードされた場合、私は関数を呼び出すことができます。ロードされていなければ、イベントリスナーをアタッチできます。 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); 
    } 
} 

Answer 1

おそらく、JSのプログラミングを容易にするjQueryのようなものを使用したいと思うかもしれません。以下のような

何か：

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

はあなたが後にある何ように思われます。

Answer 2

実際にこのコードをのロードで実行する場合は、domreadyではなく、イメージをロードする必要があります。残念ながら、ready関数はそれを行いません。

は、文書のJavaScript（onloadイベント発射する前に必ず呼び出さすなわち）に含める：

var pageisloaded=0; 
window.addEvent('load',function(){ 
pageisloaded=1; 
}); 

次に、あなたのコード：あなたの枠組みの中で

if (pageisloaded) { 
DoStuffFunction(); 
} else { 
window.addEvent('load',DoStuffFunction); 
} 

（または同等の私は、一般的にちょうどこのような何かを行います私はこのコードを使用して、将来のページのためのjavascriptと画像の事前設定を行います。私が得ているものはこのページでは一切使用されていないので、イメージのスピーディーなダウンロードより優先させたくありません。

もっと良い方法があるかもしれませんが、まだ見つかりません。

Answer 3

ライブラリは不要です。 jQueryはこのスクリプトをしばらく使っていましたが、btw。

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; 

Answer 4

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

Answer 5

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は、次の3つの状態を持つことができます読み込み、 "インタラクティブ"を一度解析しても、依然としてサブリソースをロードし、ロードしたら "完了"します。 - document.readyState at Mozilla Developer Network

だからだけdocument.readyState === "interactive"をチェックし、準備ができてDOMが必要な場合。イメージを含むページ全体を準備する必要がある場合は、document.readyState === "complete"を確認してください。

Answer 6

上記のJQueryを使用するのが最も簡単で、主に使用されます。しかし、あなたは純粋なjavascriptを使うことができますが、頭にこのスクリプトを定義して、最初に読むようにしてください。あなたが探しているものはwindow.onloadイベントです。

以下は、カウンタを実行するために作成した簡単なスクリプトです。それはすべてに取り組んでいる

function MyApp(objId){ 
    this.init=function(){ 
     //......... 
    } 
    this.run=function(){ 
      if(!document || !document.body || !window[objId]){ 
       window.setTimeout(objId+".run();",100); 
       return; 
      } 
      this.init(); 
    }; 
    this.run(); 
} 
//and i am starting it 
var app=new MyApp('app'); 

：カウンターは、10回の反復

window.onload=function() 
{ 
    var counter = 0; 
    var interval1 = setInterval(function() 
    { 
     document.getElementById("div1").textContent=counter; 
     counter++; 
     if(counter==10) 
     { 
      clearInterval(interval1); 
     } 
    },1000); 

} 

Answer 7

後、私は他のソリューションを持って、私のアプリケーションは、MyAppというの新しいオブジェクトが作成されたときに開始される必要があり、そのように見える停止します私が知っているブラウザ。

Answer 8

これを試してみてください：

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

Answer 9

モジラのFirefoxはonreadystatechangeがDOMContentLoadedに代わるものであることを述べています。モジラのdoc氏は述べています

// alternative to DOMContentLoaded 
document.onreadystatechange = function() { 
    if (document.readyState == "complete") { 
     initApplication(); 
    } 
} 

DOMContentLoadedで：

文書が読み込み完了するスタイルシート、画像、 とサブフレームを待たずに、 完全にロードし、解析されたとき、DOMContentLoadedイベントが（発射されますロードイベントは、フルロードされたページ を検出するために使用できます）。

私はloadイベントは完全なドキュメント+リソースの読み込みに使用する必要があります。