使用JavaScript检测使用过的srcset或图片标记源

Question

当您使用srcset时：

<img src="example-src.jpg" srcset="example-1x.jpg 1x, example-2x.jpg 2x" />

或者使用像这样的图片标签：

<picture>
   <source media="(min-width: 64em)" src="high-res.jpg">
   <source media="(min-width: 37.5em)" src="med-res.jpg">
   <source src="low-res.jpg">
   <img src="fallback.jpg" />
</picture>

是否有可能找出浏览器决定使用的URL？检查src标记本身的<img>属性实际上并不能告诉您加载了哪个图像。

（对不起，如果这是重复的。我无法在任何地方找到解决方案。）

Answer 1

您可以在至少某些浏览器中使用currentSrc，（但我不知道哪个。）

document.getElementById('myImage').currentSrc;

或者...

jQuery('#myImage').prop('currentSrc');

Answer 2

如果您现在只想使用源代码：

1. 使用检查（ctrl + shift + i）。
2. 转到“网络”标签，确保禁用缓存并重新加载页面（F5或ctrl + R）。
3. 选择“ Img”以缩短列表。

在列表中，您将找到要加载的图像。 如果更改屏幕尺寸并重新加载，您将在结果中看到更改。

Answer 3

据我所知，目前暂时无法做到这一点。我将一个use case/feature request（＆＃34; 3.10管理源交换断点和＃34;）放入与RICG几乎相同的内容中。所以我希望它还在筹备中。但不幸的是，目前无法访问它。