ホームページ  >  記事  >  ウェブフロントエンド  >  jQuery を使用せずに $(document).ready() の機能を実現するにはどうすればよいですか?

jQuery を使用せずに $(document).ready() の機能を実現するにはどうすればよいですか?

DDD
DDDオリジナル
2024-11-05 01:33:02433ブラウズ

How to Achieve the Functionality of $(document).ready() Without jQuery?

非 jQuery $(document).ready()**

の $(document).ready() 関数と同等jQuery は、DOM が完全にロードされた後にコードを実行するためによく使用されます。ただし、jQuery の使用が望ましくない、または使用できない状況もあります。このような場合、jQuery 以外の同等のものが必要です。

Answer

$(document).ready() の非 jQuery 同等のものは document.addEventListener( "DOMContentLoaded", function() { ... })。この関数は、DOM ツリーが完全に構築されたときに発生する DOMContentLoaded イベントにイベント リスナーをアタッチします。イベント リスナー内に配置されたコードは、DOM の準備ができた後に実行されます。

window.onload との違い

window.onload は $( と同じではないことに注意してください。ドキュメント).ready()。 window.onload は、画像やスクリプトなどの外部リソースを含むすべての要素が完全にロードされるまで待機するだけです。対照的に、$(document).ready() は DOM ツリーの準備ができるまで待機するだけであり、一般に高速です。

IE8 およびそれ以前のサポート

ブラウザの場合IE8 より古い場合、DOMContentLoaded の代替方法は、次の条件で document.onreadystatechange を使用することです:

document.onreadystatechange = function () {
    if (document.readyState == "interactive") {
        // Initialize your application or run some code.
    }
}

Other Options

DOMContentLoaded の他に、他のイベント リスナーがあります。 DOM のロードを処理するために使用できます。詳細については、Mozilla Developer Network (MDN) のドキュメントを参照してください。

以上がjQuery を使用せずに $(document).ready() の機能を実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。