jQuery のない世界で $(document).ready() を置き換える方法は?

非 jQuery 代替手段の公開: $(document).ready() の同等物

jQuery の堅牢な機能を使用せずに Web 開発事業に着手する場合、これは非常に重要です。同様の結果を達成するための代替方法を探索します。このようなシナリオの 1 つは、広く使用されている $(document).ready() 関数と同等のものを探すときに発生します。

ECMA 標準に準拠しているブラウザの場合、次のスニペットはシームレスな代替手段を提供します。

document.addEventListener("DOMContentLoaded", function() {
  // Code goes here
});

このスクリプトは、ドキュメント オブジェクト モデル (DOM) ツリーが読み込まれると、指定されたコード ブロックの実行をトリガーします。画像やスタイルシートなどの外部アセットを除き、DOM 構造のみを監視します。

window.onload との区別

window.onload は、 JQuery の $(document).ready() と同等の機能。 window.onload はコードを実行する前に外部アセットを含むすべてのリソースが完全にロードされるのを待ちますが、$(document).ready() は DOM の可用性のみを検出します。この微妙な違いは、特に外部リソースの読み込みがパフォーマンスの遅延を引き起こす可能性がある状況で、アプリケーションの動作に影響を与える可能性があります。

IE8 およびそれ以前のブラウザの互換性

IE8 以前との互換性を確保するにはブラウザの場合、次のコード スニペットは代替オプションを提供します。

document.onreadystatechange = function () {
    if (document.readyState == "interactive") {
        // Code goes here
    }
}

このスクリプトは、onreadystatechange イベントに依存し、「対話型」ドキュメントの準備完了状態をチェックしてコードの実行を開始します。

以上がjQuery のない世界で $(document).ready() を置き換える方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。