Mutation Observer：如何从 Mutation Record 中获取当前数据？

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应该类似于"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

编辑 2

我什至尝试了下面的这段代码（在 MutationObserver 函数中），结果是 0，这让我相信 MutationRecord 来自 before change或者 observer 在进行更改之前触发。

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

我在这里错过了什么？

Answer 1

所以我发现 MutationRecord 在 <img> 完成加载之前被检索。我所要做的就是等待它加载，然后我就能够从 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);
  });
});

Mutation Observer：如何从 Mutation Record 中获取当前数据？

Mutation Observer: How To Get Current Data From Mutation Record?

javascript

mutation-observers