22

jQuery JavaScript ライブラリを使用しています。DOM がセットアップされたときに起動するイベント リスナーReady onが気に入っています。$(document)

( .onload にかなり似ていますが、外部ソースはありません)

これと非常によく似た動作をするが、要素が完全にロードされたときに起動するイベントリスナーがあれば、非常に便利だと思います。(fe: ピクチャ、非常に長いテキスト コンテンツを含む Div など)

jQuery または JavaScript の両方のメソッドをいただければ幸いです。

4

3 に答える 3

21

などの任意の DOM 要素<div>が準備完了になったときに発生するイベントはありません。画像には独自のloadイベントがあり、画像データがロードされてレンダリングされたときに通知されます。その他のいくつかの特殊なタイプの要素にはイベントがあります。ただし、通常の DOM 要素にはそのようなイベントはありません。

任意の DOM 要素の準備ができたらすぐに JavaScript コードを実行したい場合、それを行う唯一の方法は、その DOM 要素の直後にインライン スクリプトで関数呼び出しを配置することです。その時点でその DOM 要素は準備ができていますが、その後の DOM の残りの部分はまだ準備ができていない可能性があります。それ以外の場合は、スクリプトをドキュメントの最後に配置するか、ドキュメント全体の準備が整ったときにスクリプトを起動できます。

以下は、jQuery 形式で表現された既存のロード イベントです (これらはすべてプレーンな JS でも実行できます)。

// when a particular image has finished loading the image data
$("#myImage").load(fn);

// when all elements in the document are loaded and ready for manipulation
$(document).ready(fn);

// when the DOM and all dynamically loaded resources such as images are ready
$(window).load(fn);

.load()jQuery では、次のようなメソッドを使用してコンテンツを動的にロードし、そのコンテンツがロードされたときに通知を受けることもできます。

$( "#result" ).load( "ajax/test.html", function() {
  alert( "Load was performed." );
});

内部的には、これは ajax 呼び出しを実行してデータを取得し、データが ajax によって取得されてドキュメントに挿入された後にコールバックを呼び出します。ネイティブのイベントではありません。

要素を DOM に動的にロードするコードがあり、それらの DOM 要素がいつ存在するかを知りたい場合、いつ準備ができているかを知る最善の方法は、それらを DOM に追加するコードに何らかのソートを作成させることです。イベントの準備ができたら通知します。これにより、要素が現在 DOM にあるかどうかを調べようとするポーリング作業でバッテリーが浪費されるのを防ぎます。

DOM MutationObserverを使用して、特定の種類の変更がいつ DOM に加えられたかを確認することもできます。

于 2013-10-14T08:10:42.320 に答える
4

すべての要素 (divとを含むimg) は、DOMReady が起動するとすぐに準備が整います。これが意味することです。

ただし、タグがその属性に画像を完全にロードしたload()ときに、イベントを使用していくつかのコードを実行できます。imgsrc

$('img').load(function() {
   console.log('image loaded');
});
于 2013-10-14T08:08:16.397 に答える