檢測innerHTML更改后何時加載所有內容

Question

我正在使用此代碼更改div的內容

mydiv.innerHTML = "html code with text and images";

加載所有內容后，是否可以使用一些事件來獲取通知？ （無論是否沒有圖像或圖像太多）

我想我可以遍歷所有子元素並向其添加事件偵聽器，但希望還有其他方法。

Answer 1

也許像這樣，只是為了給您一個香草javascript的想法

 var updateContent = function(element, content) { element.innerHTML = content; var images = element.querySelectorAll('img'); var loadedItems = 0; var totalItems = images.length; var loaded = function() { loadedItems++; console.log('loaded item: ' + loadedItems); if(loadedItems == totalItems) { element.classList.add('load-completed') console.log('finished loading all images'); } }; for(var i=0; i < totalItems; i++){ if(images[i].complete) { loaded(); } else { images[i].addEventListener('load', loaded); images[i].addEventListener('error', function() { console.log('error'); }); } } } updateContent( document.querySelector('.my-div'), '<h1>hello world<\\h1><img src="http://lorempixel.com/400/200/sports/1"><img src="http://lorempixel.com/400/200/sports/2">' ); 

 .my-div { border:solid 5px orange; } .my-div img { width: 100px; /* just to show it all in snippet */ height: 50px; } .load-completed { border: dashed 5px green; } 

 <div class="my-div"></div> 

Answer 2

Edit 2012 live live方法從jQuery 1.7.0開始不推薦使用。

現在建議使用.on（）事件來附加事件處理程序。

這將替換.bind() .delegate()和.live() 。

參見文檔： http : //api.jquery.com/on/

原始答案

我認為jQuery .live()事件可能是您正在尋找的東西。

嘗試這個

  mydiv.live('load', function () {
     //code here
 });