javascript監聽頁面內容已更新

由於今天ajax被廣泛使用，許多頁面內容被異步加載。在所有的DOM被加載後，有什麼方法可以知道加載的東西？例如，整個頁面被加載，但有些圖像是由new image()創建/加載的，我怎麼能通過javascript知道在網頁中發生的這些變化？任何事件都可能有用？javascript監聽頁面內容已更新

來源

2011-05-05 icespace

已經提到的突變事件應該可以做到。如果使用jQuery，你可以做這樣的事情與「DOMSubtreeModified」突變事件：

$(document).ready(function() { 
    $('body').bind('DOMSubtreeModified', 'test', function() { 
     alert('something changed'); 
    }); 

    $('#some-button').click(function() { 
     $('body').append('<h4>added content</h4>'); 
    }); 
});

任何內容的變化會顯示警告框。在這個例子中，當點擊一個ID爲「some-button」的按鈕時，內容被添加到主體並顯示警報。突變事件提供了一些更具體的事件類型，我所展示的事件可能是最一般的。

來源

2011-05-05 05:55:34 Glav

這就是我希望，非常感謝。 – icespace 2011-05-05 06:21:59

有一些突變事件：http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-MutationEvent

onsubtreemodified
onnodeinserted
onnoderemoved
等
看這裏：https://developer.mozilla.org/en/DOM_Events

來源

2011-05-05 05:41:03 wong2

太棒了！我會先閱讀文章。謝謝 – icespace 2011-05-05 05:48:17

下面是一個代碼塊可以幫助： -

<script> 
    var img = new Image(); 
    img.src = "http://static.yourwebsite.com/filename.ext"; 
    img.onreadystatechange = function(){ 
     if((img.readyState == "complete") || (img.readyState == 4)) { 
      alert("Image loaded dynamically!"); 
     } 
    }; 
</script>

您必須更改圖片來源。事件onreadystatechange將幫助您瞭解圖像是否已加載。 readyState必須是由AJAX發送的complete或4，如果我在提取頁面時沒有弄錯。

，或者您可能與

<script> 
    var img = new Image(); 
    img.src = "http://static.yourwebsite.com/filename.ext"; 
    img.onload = function(){ 
     alert("Image loaded dynamically!"); 
    }; 
</script>

信用去上面的代碼：http://www.techrepublic.com/article/preloading-and-the-javascript-image-object/5214317

在這一段代碼中，我們使用onload事件來觸發圖像負載

希望這有助於。如果這有幫助，請將其標記爲答案！：D

Cheers

來源

2011-05-05 05:41:48

對我來說不好的是，我不知道有沒有這樣的東西會被添加到網頁中:(但是它還是很好的知道。非常感謝你！ – icespace 2011-05-05 05:47:37

提到不是，很高興幫助你 – 2011-05-05 05:48:58

javascript監聽頁面內容已更新

回答

相關問題