Mutation Observer : Mutation Record로부터 현재 데이터를 얻는 방법?

Question

이 동적으로 변경되는 <img> 요소가 있습니다. 변경이 발생하면 MutationObserver가 실행되고 MutationRecord가 기록됩니다. 문제는 MutationRecord에서 데이터에 액세스하려고 할 때 오래된 데이터를 제공한다는 것입니다. 예를 들어

:

이 원래 img 원소이다.

<img src="#" /> 

는 src 후

MutationObserver = window.MutationObserver || window.WebKitMutationObserver; 

var observer = new MutationObserver(function(mutations){ 
console.log(mutations); 
console.log(mutations[0].target.currentSrc); 


}); 

var element = document.querySelector("#shirt-design"); 

observer.observe(element, { 
    attributes: true, 
    childList: true 
}); 

동적 변화 JS, currentSrc는 "image.jpg를"다음과 같을 것이다. MutationRecord는 새 데이터를 표시하지만 직접 액세스하려고하면 이전 데이터가 표시됩니다. 예를 들어

는

console.log(mutations[0].target.currentSrc); //shows # 

console.log(mutations[0].target.currentSrc); //SHOULD BE image.jpg 

은 어떻게 MutationRecord에서 현재 데이터에 액세스 할 수 있습니까?

편집

은 내가이 MutationRecord에서 원하는 것은 naturalWidth입니다. 그것은 src이 # (마치) 인 것처럼 0을 제공합니다. 현재 이미지의 naturalWidth을 얻는 방법은 무엇입니까?

console.log(mutations[0].target.naturalWidth); //0 
console.log(mutations[0].target.naturalWidth); //SHOULD BE number > 0 

MutationRecord이 에서 변경 또는 observer 전에이라고 생각하는 날 리드 심지어합니다 (MutationObserver 함수 내) 아래에이 코드를 시도하고 결과가 0했다 2

편집, 변경이 이루어지기 전에 발사 중입니다.

console.log(document.querySelector("#shirt-design").naturalWidth); //0 

무엇이 여기에 있습니까?

Answer 1

그래서 나는 <img>로드가 끝나기 전에 MutationRecord가 검색되고 있다는 것을 알아 냈습니다. 로드 할 때까지 기다렸다가 MutationRecord에서 올바른 데이터를 가져올 수있었습니다.

var observer = new MutationObserver(function(mutations){ 
    console.log(mutations); 
    //wait for img to load 
    document.querySelector("img").addEventListener("load", function(){ 
    console.log(mutations[0].target.currentSrc); 
    }); 
});