フレームワークを使用せずに Javascript で DOM Ready イベントを検出する方法は?

フレームワークを使用しない Javascript DOM Ready イベント検出

JavaScript では、開発者は多くの場合、Prototype や jQuery などのフレームワークを利用して、関数を window.onload イベントに付加して特定のタスクを実行します。 。ただし、これらのフレームワークを使用せずにこれを実現する他の方法もあります。

JavaScript のドキュメント オブジェクトには、AJAX リクエストの ReadyState プロパティと同様に、ページの読み込み段階を示す ReadyState プロパティがあります。 readyState プロパティには次の値を指定できます。

• loading - ページはまだ読み込み中であり、DOM 要素はまだ利用できません。
• interactive - ページは読み込まれており、DOM 要素はほとんど利用可能です。インタラクションの準備ができていますが、画像やその他のリソースがまだ読み込まれている可能性があります。
• complete - ページは完全に読み込まれ、すべての DOM 要素が使用可能です。

DOM の準備ができたことを検出するにはでは、次のコードを使用できます:

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

このコードは、ページがすでに完全にロードされているか (readyState が「complete」) かどうかを確認し、fireOnReady 関数をすぐに実行します。それ以外の場合は、DOMContentLoaded イベントにコールバックをアタッチします。このイベントは、DOM の準備ができたときに発生し、fireOnReady 関数を実行します。

もう 1 つのオプションは、jQuery の文書化されていない isReady プロパティを使用することです:

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

ただし、このプロパティは文書化されておらず、jQuery の将来のバージョンでは削除される可能性があります。

最終的には、DOMContentLoaded イベントをリッスンすることが、最新のブラウザで DOM の準備ができたことを検出する最も信頼できる方法です。

以上がフレームワークを使用せずに Javascript で DOM Ready イベントを検出する方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。