67

私はライブラリの開発を手伝おうとしています。そのために、ページの読み込みを操作しようとしています。
その過程で、ライブラリをdeferとasyncの使用と完全に互換性のあるものにしたいと思います。

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

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

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

編集：

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

4

6 に答える 6

71

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

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

これは、IEとWebkitで長い間サポートされてきました。3.6でFirefoxに追加されました。これが仕様です。 "loaded"古いSafariブラウザ用です。

ページがいつロードされて解析されたかを知りたいが、すべてのサブリソースがまだロードされていない場合（これはより類似していDOMContentLoadedます）、「インタラクティブ」値を追加できます。

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

これに加えて、DOMContentLoadedがいつ起動したかを本当に知りたい場合は、そのためのイベントハンドラーを（起動する前に）インストールし、起動時にフラグを設定する必要があります。

このMDNドキュメントは、DOMの状態についての理解についても非常によく読んでいます。

于 2012-02-26T22:45:14.757 に答える
21

ドキュメントのreadyState値を確認して、イベントが発生したかどうかを確認できます。start()ドキュメントの解析が終了したときに名前が付けられた関数を実行するコードは次のとおりです。

if (/complete|interactive|loaded/.test(document.readyState)) {
    // In case the document has finished parsing, document's readyState will
    // be one of "complete", "interactive" or (non-standard) "loaded".
    start();
} else {
    // The document is not ready yet, so wait for the DOMContentLoaded event
    document.addEventListener('DOMContentLoaded', start, false);
}

上記のコードは、ドキュメントの解析が終了したことを検出することに注意してください。これは、起動されたかどうかを検出することと同じではないことに注意してくださいDOMContentLoaded（これは直後に発生し interactiveます）が、同じ実用的な目的を果たします。つまり、ドキュメントの読み込みが完了して解析されたことを通知しますが、画像、スタイルシートなどのサブリソースフレームはまだロード中です（ソース）。

于 2016-03-14T20:03:34.660 に答える
8

DOMContentLoaded（またはASAP）で何かを正しく実行する方法

HTMLドキュメントが完全にロードされ、解析されて何かを実行するのを待つ必要がある場合はDOMContentLoaded、間違いなく待つ必要があります。ただし、スクリプトをいつ実行するかを制御できない場合DOMContentLoadedは、イベントをリッスンする機会が得られるまでに、すでに起動されている可能性があります。

これを考慮に入れるには、コードDOMContentLoadedがすでに起動されているかどうかを確認する必要があります。起動されている場合は、待機する必要があるものは何でもすぐに実行に進みますDOMContentLoaded。

function runWhenPageIsFullyParsed() {
    // your logic goes here
}

if (document.readyState === "complete") {
    // already fired, so run logic right away
    runWhenPageIsFullyParsed();
} else {
    // not fired yet, so let's listen for the event
    window.addEventListener("DOMContentLoaded", runWhenPageIsFullyParsed);
}

ページの読み込み中のイベントの正しい順序は次のとおりです。

  • document.readyStateに変更interactive
  • windowのDOMContentLoadedイベントが発生します
  • document.readyStateに変更complete
  • windowのloadイベントが発生しますload

このフィドルでは、ページの読み込み中にイベントの完全な順序を確認できます。

于 2019-12-06T21:12:41.947 に答える
1

これを試すか、このリンクを見てください

<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スタイルシートがロードされるまで、ページは解析を終了せず、起動しません。

于 2012-02-27T06:49:02.783 に答える
0

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

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

次に、以下を確認します。

if(loaded) ...
于 2014-03-20T19:52:36.660 に答える
-8

他のライブラリ（jQueryなど）がすでにDOMContentLoadedを使用している場合、それを再度使用することはできません。それは悪いニュースになる可能性があります。なぜなら、それを使用できなくなるからです。$(document).ready()特に、別のライブラリの場合は、すべてがjQueryを使用する必要があるわけではないので、単に使用しないのはなぜですか。

于 2016-08-19T21:22:59.557 に答える