Question

我在尝试获取图片的currentSrc属性时遇到了一些麻烦（仅限Chrome）。

特别是，我正在查看属于图片元素的图像，因此浏览器提供了src。您可以从一个源元素中选择一个没有src的图像，该图像由src提供。

像这样：

<picture>
  <source media="(min-width: 2000px)" srcset="https://s3-eu-west-1.amazonaws.com/gears-min.jpg">
  <source media="(min-width: 1600px)" srcset="https://s3-eu-west-1.amazonaws.com//black_hole.jpg">
  <source media="(min-width: 1200px)" srcset="https://s3-eu-west-1.amazonaws.com/Moon.jpg">
  <img style="width:100%">
</picture>

我正在使用两种方法，而且我对其中任何一种都没有任何乐趣。

使用mutationummary库，我无法访问currentSrc属性，如下所示：

var imageObserver = new MutationSummary({
       callback: collectSource,
       queries: [ { element: 'img', elementAttributes: 'src srcset currentSrc' }]
});

和我使用一个简单的循环通过document.getElementsByTagName（'img'），就像这样：

var elementSet = document.getElementsByTagName('img');
for (var i=0; i < elementSet.length; i++) {
console.log(elementSet[i].currentSrc);
}

我可以逻辑地看到为什么突变摘要库不起作用，DOM中没有发生变化，变异摘要只跟踪属性，而不是属性。

但是，我不明白为什么基本循环不能让我使用img.currentSrc看到currentSrc。我看着它时是空白的。

令人恼火的是，当我查看Chrome开发工具中图像元素的属性时，我可以看到currentSrc属性，我可以看到它更新。我无法得到它。

有什么想法吗？

在Picture元素中观察图像currentSrc属性的更改

0 个答案: