jQueryのready()に代わる純粋なjs-PHP开发-php.cn

jQueryのready()に代わる純粋なjs

高洛峰

リリース： 2016-12-06 13:48:55

オリジナル

1400 人が閲覧しました

ready メソッドは、DOM (ドキュメントオブジェクトモデル、ドキュメントオブジェクトモデル) ツリーが HTML ページに完全に読み込まれた後にトリガーされる jQuery によって実装されたメソッドです。これは、受け取ったメソッドがページ内のすべての DOM にアクセスできる場合にのみ実行されるためです。この時点で、HTML 内の要素に完全にアクセスして操作できるようになります。

jQuery 3.0 より前では、一般的な匿名関数の使用法は次のとおりでした。 3.0 のリリース前には、ready メソッドを使用する方法がいくつかありました。

ドキュメントオブジェクトの場合: $(document).ready(handler);

空の要素の場合: $().ready(handler);

または、直接使用します (つまり、指定された要素上ではありません): $(handler);

上記のメソッドは、Which であるかどうかに関係なく、ページのすべての DOM がロードされた後に実行されます。つまり、イメージ要素 $("img") とドキュメントオブジェクトでの ready メソッドの呼び出しは、これらの要素が読み込まれた後にハンドラーをトリガーする必要があることを示しませんが、DOM ツリー全体が読み込まれた後にトリガーされます。

jQuery 3.0 では、$(handler); メソッドを除くすべてが非推奨になりました:

この選択は .ready() メソッドの動作とは何の関係もないため、非効率的です。

Ready イベントと Load イベントの違い

ready イベントはページ DOM が完全にロードされ、要素に正しくアクセスできるようになった後にトリガーされます。リソースファイル (写真、ビデオなど) ) がすべて読み込まれた後にトリガーされます。

load イベントは次のように使用できます:

$(document).ready(function() {
 // 在 .ready() 被触发时执行.
});

ログイン後にコピー

これは、DOM が読み込まれ、画像が読み込まれるまで待機します。 (画像のサイズに応じて、ロードには一定の時間がかかります)

通常の DOM 操作の場合、load イベントはおそらく必要ありませんが、待機する読み込みエフェクトを実行したい場合は、ページ上のすべてのリソースが読み込まれるか、画像のサイズを計算する場合、これは良い選択です。

jQuery は必要ないかもしれません。 .ready()

ready メソッドは、内部のコードが正しく操作できることを保証します。 DOM 要素。これはどういう意味ですか? JavaScript コードを HTML ドキュメントに挿入すると、ページ内のすべての要素が読み込まれたときにコールバック関数内のコードが確実に実行されます。実行する JavaScript を body 要素の最後の位置に置くと、JavaScript コードの実行時にページ内のすべての要素が読み込まれるため、コードをready() メソッドでラップする必要はありません。この時点で要素にアクセスしたり操作したりできます:

$(window).on("load", function(){
 // 当页面所有资源(图片,视频等)全加载完成后才加载执行
});

ログイン後にコピー

ネイティブ JavaScript を使用して、ready() を置き換えます
最新のブラウザーおよび IE9 以降では、DOMContentLoaded イベントをリッスンできます:

<!doctype html>
<html>
 <head>
  <meta charset="utf-8">
  <title>.ready() 教程</title>
  <script src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
  <script>
   $(function(){ // .ready() 的回调方法, 在 DOM 完全加载完后执行
    var length = $("p").length;
    // 下面会在console控制台中输出 1, 表示有段落 p 存在.
    // 这就证明了这个回调方法在 DOM 完全加载完后执行.
    console.log(length);
   });
  </script>
 </head>
 <body>
  <p>I&#39;m the content of this website</p>
 </body>
</html>

ログイン後にコピー

ここでは、イベントがトリガーされたときにコールバックメソッドは実行されません (このイベントリスナーは、コールバック関数が常に実行できるようにするために、ドキュメントの readState 属性を検出します)。 (参照)、検出された属性値が完全であれば、コールバック関数がすぐに実行されます:

<!doctype html>
<html>
 <head>
  <meta charset="utf-8">
  <title>.ready() 教程</title>
 </head>
 <body>
  <p>I&#39;m the content of this website</p>
  <script src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
  <script>
   var length = $("p").length;
   // 下面会在console控制台中输出 1, 表示有段落 p 存在.
   console.log(length);
  </script>
 </body>
</html>

ログイン後にコピー

このソリューションはすでに実装されている domReady ライブラリを導入することを常に忘れないでください。

IE の古いバージョン

IE8 以前の場合、onreadystatechange イベントを使用してドキュメントの readyState 属性を検出できます:

document.addEventListener("DOMContentLoaded", function(){
 // 在 DOM 完全加载完后执行
});

ログイン後にコピー

;

さらに、jQuery のようなload イベントを使用して、次のことができます。これはすべてのブラウザで正しく動作します。これにより、すべてのリソースがロードされるまで待機するため、ある程度の遅延が発生します。前述のように、コールバックが確実に実行されるようにするために、readyState を確認する必要があることに注意してください。イベントがトリガーされた後に関数を実行することもできます。