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

Tyl*_* V. 7 javascript html5 srcset

当你像这样使用srcset时:

<img src="example-src.jpg" srcset="example-1x.jpg 1x, example-2x.jpg 2x" />
Run Code Online (Sandbox Code Playgroud)

或使用这样的图片标签:

<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>
Run Code Online (Sandbox Code Playgroud)

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

(对不起,如果这是重复的.我无法在任何地方找到解决方案.)

Tyl*_* V. 11

你可以currentSrc在至少一些浏览器中使用,(虽然我不知道哪个.)

document.getElementById('myImage').currentSrc;
Run Code Online (Sandbox Code Playgroud)

要么...

jQuery('#myImage').prop('currentSrc');
Run Code Online (Sandbox Code Playgroud)

  • 我创建了一个 Pen 来进行快速测试。只需在各种浏览器中打开网址查看:http://codepen.io/gapcode/full/pyojPd/ (2认同)
  • `currentSrc` 是一个非常有用的属性,应该可以解决 90% 的情况,但是有谁知道如何在实际加载图像之前找出将显示哪个图片源? (2认同)