Question

我有一个<img>元素，src动态更改。发生更改时，将触发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应该类似＆＃34; image.jpg＆＃34;。 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？

编辑2

我甚至尝试过以下代码（在MutationObserver函数内），结果是observer，这让我相信MutationRecord来自之前的变化或{{1在更改之前触发。

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

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

1 个答案: