web-dev-qa-db-ja.com

DOMContentLoadedが起動されたかどうかを検出する方法

ライブラリの開発を支援しようとしています。そのために、ページの読み込みを処理しようとしています。
このプロセスでは、ライブラリをdeferおよびasyncの使用と完全に互換性のあるものにしたいと考えています。

私が欲しいのは簡単です：
ファイルが実行されるまでにDOMContentLoadedが起動されたことを知るにはどうすればよいですか？

なぜこんなに難しいのですか？
IEでは、document.readyStateはDOMContentLoadedの前にインタラクティブに表示されます。
I しませんブラウザーの検出を何らかの方法で使用します。これは、私と他の参加者のポリシーに反します。

正しい選択肢は何ですか？

編集：

私は十分に明確ではなかったようです。私はnotロードイベントが既に発生したかどうかを知りたいです!!!私はすでにその問題を解決する方法を知っていました！ DOMContentLoadedで解決する方法を知りたい!!!

javascripteventsreadystate
44
brunoais

ページ内のすべてのリソースがロードされたかどうかを確認するには：

if (document.readyState === "complete" || document.readyState === "loaded") {
     // document is already ready to go
}

これはIEおよびwebkitで長い間サポートされています。3.6でFirefoxに追加されました。 spec 。"loaded"は、古いSafariブラウザー用です。

ページが読み込まれて解析されたが、すべてのサブリソースがまだ読み込まれていない（DOMContentLoadedに似ている）ことを知りたい場合は、「インタラクティブ」値を追加できます。

if (document.readyState === "complete" 
     || document.readyState === "loaded" 
     || document.readyState === "interactive") {
     // document has at least been parsed
}

さらに、DOMContentLoadedがいつ発生したかを知りたい場合は、そのイベントハンドラーを（起動する前に）インストールし、起動時にフラグを設定する必要があります。

このMDNドキュメント は、DOMの状態についての理解を深めるための非常に優れた資料でもあります。

48
jfriend00

このイベントが発生すると、_document.readyState_が変更されます。したがって、readyState値を確認して、イベントが発生したかどうかを確認できます。ドキュメントの準備ができたときにstart()を実行するコードを次に示します。

_if (/comp|inter|loaded/.test(document.readyState)){
    // In case DOMContentLoaded was already fired, the document readyState will be one of "complete" or "interactive" or (nonstandard) "loaded".
    // The regexp above looks for all three states. A more readable regexp would be /complete|interactive|loaded/
    start();
}else{
    // In case DOMContentLoaded was not yet fired, use it to run the "start" function when document is read for it.
    document.addEventListener('DOMContentLoaded', start, false);
}
_
13
oriadam

これを試すか、これを見てください link

<script>
    function addListener(obj, eventName, listener) { //function to add event
        if (obj.addEventListener) {
            obj.addEventListener(eventName, listener, false);
        } else {
            obj.attachEvent("on" + eventName, listener);
        }
    }

    addListener(document, "DOMContentLoaded", finishedDCL); //add event DOMContentLoaded

    function finishedDCL() {
        alert("Now DOMContentLoaded is complete!");
    }
</script>

注

<script>の後に<link rel="stylesheet" ...>がある場合

ページは解析を終了せず、スタイルシートがロードされるまでDOMContentLoadedは起動しません

2
OammieR

DOMContentLoadedが発生したかどうかを「正確に」知りたい場合は、次のようなブールフラグを使用できます。

var loaded=false;
document.addEventListener('DOMContentLoaded',function(){
loaded=true;
...
}

次に確認してください：

if(loaded) ...
1
deviato