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

Question

jQuery JavaScriptライブラリを使用しています。 イベントリスナーが好きです on $(document) DOMの設定時に起動します。 要素が完全にロードされたときにイベントリスナーウィッヒはこれに非常に類似した挙動を持っていますが、火事があった場合

は、私は、それは非常に便利でしょう

（.onloadにはかなり似ています）。 （例：Picture、Divなど）

jQueryまたはJavaScriptメソッドの両方に感謝します。

Answer 1

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

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

は、jQueryの形で表現既存のロードイベント（これらはすべて、あまりにも平野JSで行うことができます）です：jQueryので

// 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); 

、あなたはまた、コンテンツを動的に読み込むことができますし、そのコンテンツがされたときに通知されますこのよう​​メソッドを使用してロード：

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

内部的には、これは単にデータをフェッチするためにAJAX呼び出しを行い、そのデータは、AJAXによって取得し、文書に挿入された後にコールバックを呼び出します。これはネイティブイベントではありません。

---

あなたが動的にDOMへの要素をロードしているいくつかのコードを持っていて、それらのDOM要素が存在する場合を知りたい場合は、その後、彼らは準備ができているときを知るための最良の方法は、追加のコードを持つことですDOMへのそれらの準備が整ったら、何かイベントを作成します。これは、要素が現在DOM内にあるかどうかを調べようとするバッテリーの無駄なポーリング作業を防ぎます。

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

Answer 2

すべての要素（divとimgを含む）は、DOMReadyが発生するとすぐに準備が整います。これがその意味です。 imgタグが完全にイメージをロードしたとき、それはsrc属性だで

しかし、あなたはいくつかのコードを実行するためにload()イベントを使用することができます。

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

Answer 3

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タイマーを追加する必要があります。