フレームワークに依存せずに DOM の準備状況を判断するにはどうすればよいですか?

Document.isReady: DOM Ready Detection のネイティブ ソリューション

window.onload イベントの管理は、Prototype や jQuery などのフレームワークに依存しない場合があります。常に望ましいものであること。この記事では、DOM の準備状況を判断するための代替方法、特に document.isReady の使用を検討します。

Document.isReady のクエリ

安定したイベント API を備えた最新のブラウザーの場合、 DOMContentLoaded イベントは、DOM Ready イベントを処理するための堅牢な方法を提供します。次のような実装は、シンプルで効率的なソリューションを提供します。

<code class="javascript">function fireOnReady() { /* ... */ }
if (document.readyState === 'complete') {
    fireOnReady();
} else {
    document.addEventListener("DOMContentLoaded", fireOnReady);
}</code>

jQuery の $.isReady プロパティ

jQuery は、文書化されていないプロパティ $.isReady を提供します。内部的には DOM 準備完了状態。このプロパティを利用すると、次のような簡潔なチェックが可能になります。

<code class="javascript">if($.isReady) {
    // DOM is ready
} else {
    // DOM is not yet ready
}</code>

このプロパティは文書化されておらず、将来の jQuery バージョンでの可用性は保証できないことに注意することが重要です。慎重に使用し、アップグレード時の潜在的な変更に備えてください。

カスタム DOM Ready スニペット

より幅広いブラウザ互換性を実現するために、カスタム DOM Ready スニペットを使用できます。 Dustin Diaz のアプローチに触発され、正規表現を使用して document.readyState をチェックします。

<code class="javascript">if( !/in/.test(document.readyState) ) {
    // document is ready
} else {
    // document is NOT ready
}</code>

このメソッドは、「in」サブ文字列が「loading」および「interactive」ready に存在するという事実に依存しています。状態ですが、「完了」状態ではありません。

以上がフレームワークに依存せずに DOM の準備状況を判断するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。