突变观察者：如何从突变记录中获取当前数据？

我有一个<img>元素，它的src是动态更改的。当发生变化时，MutationObserver被触发并记录MutationRecord。问题是，当我尝试访问MutationRecord中的数据时，它给了我旧数据。突变观察者：如何从突变记录中获取当前数据？

例如：

这是原始img元件。

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

的src之后是动态变化的，currentSrc应该像 “image.jpg的”。 MutationRecord显示新数据，但当我尝试直接访问它时，它会显示旧数据。

例如

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

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

我怎样才能访问来自MutationRecord当前数据？

编辑

我从MutationRecord要的是naturalWidth。它给我0好像src是#（它是）。 如何获得当前图像的naturalWidth？

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

EDIT 2

我甚至尝试这个代码如下（在MutationObserver函数中），结果是0，这使我相信，MutationRecord从变化或observer前在做出改变之前正在发射。

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

我在这里错过了什么？

来源

2016-10-26 Josan Iracheta

'.target'是Node受到影响的突变。为什么''childList：true'为''？ – Andreas

你确定它只是'src'吗？也许它是被替换的整个节点？ – wOxxOm

@wOxxOm唯一被改变的是使用jQuery的'src' attr（）' –

所以我想出了在<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); 
    }); 
});

来源

2016-10-28 01:45:45

突变观察者：如何从突变记录中获取当前数据？

回答

相关问题