如何檢測所有元素的內容是否已被加載？

我不知道我怎樣才能檢測是否所有的內容裏面附加動態HTML元素被加載。元素的內容可能是文字和圖片，也可能是視頻。我需要檢測它以獲得正確的元素的高度值。我相信MutationObserver不是那個合適的解決方案，因爲這隻能檢測節點是否已被改變，或者它的屬性。我必須檢測元素的內容何時被加載。向父母委託load事件不會更改任何內容。有什麼建議嗎？如何檢測所有元素的內容是否已被加載？

來源

2015-08-24 sunpietro

你是如何加載文本內容？ –

我從AJAX響應中獲取內容作爲字符串。該字符串包含HTML標記，如'

'，''，等我追加它的需求。 – sunpietro

因此，對於文本內容，您可以知道它何時完成加載（即成功完成ajax請求）。至於圖片，您需要聽取img標籤的「加載」事件。對於視頻，這取決於什麼樣的視頻，他們是YouTube，Flash，HTML5 ..？ –

你很可能需要一個具有恆定的setTimeout檢查元素的長度的JavaScript。（即通常不加載的元件具有長度爲0或無效）

這是我們遇到的一段時間回來的東西，可能適用於您的情況也是如此。這是爲了檢測某些元素何時完成加載，但看到您的問題，這個概念也適用。

http://www.gambit.ph/how-to-use-the-javascript-youtube-api-across-multiple-plugins/

來源

2015-08-24 09:35:13

看起來有點哈克給我。使用超時並不是用於這種檢測的最好解決方案。因爲你永遠不知道要在元素中加載所有圖像需要多長時間。 – sunpietro

您可以使用您的AJAX調用回調函數做到這一點。關閉我的頭頂，我不記得如何在香草JavaScript的工作，但在jQuery的它應該是這樣的：

$.ajax({ 
    url: 'my-url' 
}).done(function(){ 
    // This only fires once the AJAX request/response has complete 
    populateElement(); 
    fixElementHeight(); 
});

通過做這種方式可以確保你把所有的內容更新元素之前。元素更新後，您就可以測量其高度。如果新的內容的一部分是圖像，或者需要獲取一些其他的內容類型，然後我會做的populateElement功能獲取：

var contentImage = new Image(imgWidth, imgHeight); 
$(contentImage).click(function(event){ 
    ... 
}); 
contentImage.src = 'source of image';

來源

2015-08-24 09:43:26 hellsgate

這不是正確的解決方案。這個問題不在AJAX請求中，它在圖像加載事件中。 – sunpietro

您也可以在此處爲圖片添加加載事件，請參閱我所做的修改。 http://stackoverflow.com/questions/3511200/new-image-how-to-know-if-image-100-loaded-or-not還有一些信息 – hellsgate

我決定使用JavaScript承諾處理圖像加載事件。我爲每張圖片創建了一個新的承諾，並在所有圖片加載後更新我的應用程序。因此，沒有其他方法可以對父級進行委派來檢測是否加載了所有圖像。

來源

2015-08-24 10:00:35 sunpietro

如何檢測所有元素的內容是否已被加載？

回答

相關問題