私はライブラリの開発に協力しようとしており、そのためにページの読み込みに取り組もうとしています。
その過程で、ライブラリを defer と async の使用と完全に互換性のあるものにしたいと考えています。
私が欲しいのはシンプルです。
ファイルが実行されるまでに DOMContentLoaded が起動されたことをどうやって知ることができるでしょうか?
なぜこれが難しいのでしょうか? IE
では、document.readyStateはDOMContentLoadedの前にinteractiveと表示されます。
しませんいかなる形であれブラウザ検出を使用することは、私と他の参加者のポリシーに反します。
正しい代替案は何ですか?
編集：
十分に説明できなかったようです。ないロード イベントがすでに発生しているかどうかを知りたいです。その問題を解決する方法はすでに知っていました。DOMContentLoaded を使用して解決する方法を知りたいです。
ベストアンサー1
ページ内のすべてのリソースが読み込まれたかどうかを確認するには:
if (document.readyState === "complete" || document.readyState === "loaded") {
// document is already ready to go
}
これはIEとWebkitでは長い間サポートされてきました。Firefoxには3.6で追加されました。スペック."loaded"は古い Safari ブラウザ用です。
ページが読み込まれて解析されたが、すべてのサブリソースがまだ読み込まれていないことを知りたい場合 ( に似ていますDOMContentLoaded)、「interactive」値を追加できます。
if (document.readyState === "complete"
|| document.readyState === "loaded"
|| document.readyState === "interactive") {
// document has at least been parsed
}
さらに、DOMContentLoaded がいつ発生したかだけを知りたい場合は、そのためのイベント ハンドラーを (発生する前に) インストールし、発生したときにフラグを設定する必要があります。
このMDNドキュメントDOM の状態についてさらに理解を深めるには、こちらも非常に良い読み物です。