変異オブザーバ：突然変異記録から現在のデータを取得するには？

Question

が動的に変更された<img>要素があります。変更が発生すると、MutationObserverが起動され、MutationRecordが記録されます。問題は、私がMutationRecordからデータにアクセスしようとするときに、古いデータを私に与えることです。例えば

：

これは、元のimg要素です。

<img src="#" /> 

JS

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 
}); 

srcが動的に変更された後、currentSrcは "image.jpg" のようなものでなければなりません。 MutationRecordは新しいデータを表示しますが、直接アクセスしようとすると古いデータが表示されます。例えば

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

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

どのように私はMutationRecordから現在のデータにアクセスすることができますか？私はMutationRecordから何をしたいです

EDIT

はnaturalWidthです。それはが#（これはそれ）であるかのように私に0を与えます。 現在の画像のnaturalWidthを取得するにはどうすればよいですか？

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

MutationRecordがから変更またはobserver前であることを信じて私をリードし、私も（MutationObserver関数内）以下、このコードを試してみましたが、結果は0た2

EDIT、変更が行われる前に発砲しています。

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); 
    }); 
});