자바 스크립트 듣기 페이지 내용 업데이트

Question

오늘은 아약스가 널리 사용 되었기 때문에 많은 페이지 내용이 비동기 적으로로드됩니다. 모든 DOM이로드 된 후에 무언가가로드된다는 것을 알 수있는 방법이 있습니까? 예를 들어 전체 페이지가로드되지만 일부 이미지는 new image()에 의해 작성 /로드됩니다. 이러한 변경 사항은 자바 스크립트로 웹 페이지에서 어떻게 발생했는지 알 수 있습니까? 모든 이벤트가 유용 할 수 있습니까?

Answer 1

이미 언급 한 돌연변이 이벤트가 트릭을 수행해야합니다. jQuery를 사용하는 경우, 당신은 'DOMSubtreeModified'돌연변이 이벤트와 같은 것을 할 수 있습니다

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

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

모든 콘텐츠 변경은 경고 상자가 표시됩니다. 이 예에서 "some-button"id가있는 버튼을 클릭하면 내용이 본문에 추가되고 경고가 표시됩니다. 돌연변이 이벤트는 좀 더 구체적인 유형의 이벤트를 제공합니다. 내가 보여준 이벤트는 아마도 가장 일반적인 이벤트 일 것입니다.

Answer 2

일부 돌연변이 이벤트가 있습니다 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

Answer 3

에 따라 도움이 될 수 코드 조각이다 : -

을

<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

건배