web-dev-qa-db-ja.com

jQuery.ready（）要素の同等のイベントリスナー？

JQuery JavaScriptライブラリを使用しています。 DOMが設定されたときに発生するイベントリスナーready on $(document)が好きです。

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

これと非常によく似た動作をするイベントリスナーがあったとしても、elementが完全にロードされたときに発生する場合は、非常に便利です。 （例：画像、非常に長いテキストコンテンツを含むDivなど）

JQueryとJavaScriptの両方のメソッドに感謝します。

javascriptjquerydomonloaddocument-ready
19
Steven Palinkas

_<div>_などの任意のDOM要素が準備できたときに発生するイベントはありません。画像には独自の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);
_

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

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

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

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

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

18
jfriend00

すべての要素（divとimgを含む）は、DOMReadyが起動するとすぐに準備ができています-それが意味するところです。

ただし、imgタグのsrc属性に画像が完全に読み込まれたときに、load()イベントを使用してコードを実行できます。

$('img').load(function() {
   console.log('image loaded');
});
4
Rory McCrossan

jQueryにはありませんが、独自のonDomElementIsReady、ツールを作成できます：jQuery、ES6、PromiseおよびInterval（私は怠惰ですが、あなたはアイデアを得ることができます）

要素がDOMに存在するまで待機し、利用可能になり次第、promise結果を解決します。

  const onDomElementIsReady = (elementToWatch)=> {
    //create promise
    return new Promise((res, rej)=> {
      let idInterval = setInterval(()=> {
        //keep waiting until the element exist
        if($(elementToWatch).length > 0) {
          clearInterval(idInterval); //remove the interval
          res($(elementToWatch)); //resolve the promise             
        }
      },100);
    });
  };


//how to use it?
onDomElementIsReady(".myElement").then(element => { 
                          //use jQuery element
                   });

注：これを改善するには、DOM要素が存在しない場合に約束を_rejectするタイマーを追加する必要があります。

2
ncubica