Document.isReady: DOM Ready 検出のためのネイティブ ソリューション

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

Querying Document.isReady

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

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

jQuery の $.isReady プロパティ

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

if($.isReady) {
    // DOM is ready
} else {
    // DOM is not yet ready
}

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

カスタム DOM Ready スニペット

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

if( !/in/.test(document.readyState) ) {
    // document is ready
} else {
    // document is NOT ready
}

このメソッドは、「in」部分文字列が「読み込み中」および「対話型」準備完了状態には存在するが、「完了」状態には存在しないという事実に依存しています。