對元素的jQuery.ready（）等效事件偵聽器？

Question

我正在使用jQuery JavaScript庫。 我喜歡事件監聽器準備在$(document)，DOM設置時觸發。

（非常相似.onload）

我會覺得非常有用的，如果有一個事件偵聽器至極有着非常相似的行爲這一點，但火災時元素是滿載。 （f.e .:圖片，Div等）

我將不勝感激jQuery或JavaScript方法。

Answer 1

沒有觸發的事件當任意DOM元素，如<div>準備就緒。圖像有自己的load事件來告訴你何時圖像數據已經被加載並且已經被渲染並且一些其他特殊類型的元素具有事件。但是，常規的DOM元素沒有這樣的事件。

如果您希望JavaScript代碼在任意DOM元素準備就緒後立即執行，唯一的方法是將函數調用放置在該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中，你還可以動態加載內容和當內容已經被通知使用​​方法是這樣裝：

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

內部，這只是做一個AJAX調用獲取數據，然後調用後的數據已被阿賈克斯檢索，然後插入到文檔中的回調。這不是本地的事件。

---

如果你有一些代碼，動態加載元素的DOM，你想知道什麼時候那些以DOM元素存在，那麼最好的辦法知道當他們準備是有添加代碼他們到DOM創建一些事件告訴你什麼時候準備好了。這可以防止電池浪費輪詢努力，試圖找出元件是否現在在DOM中。

也可以使用DOM MutationObserver來查看何時對DOM進行了特定類型的更改。

Answer 2

所有元素（包括div和img）都會在DOMReady啓動後立即就緒 - 這就是它的意思。

但是，您可以使用load()事件時運行一些代碼的img標籤完全載入圖像中是src屬性：

$('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 
        }); 

注：爲提高這一點，我們要補充的是reject承諾如果DOM元素永遠存在的計時器。