在Safari上获取响应图像的currentSrc

Question

我正在尝试使用photoswipe插件点击图片时定义占位符。我想定义与我的屏幕上显示的图像完全相同的响应式图像版本。

data-srcset="
http://url.com/img-240.jpg 240w, 
http://url.com/img-360.jpg 360w, 
http://url.com/img-480.jpg 480w, 
http://url.com/img-720.jpg 720w "

以上是我的图片的不同版本。

我的挑战是显示当前图像。为此，我使用currentSrc属性，该属性适用于Firefox和Chrome，但不适用于Safari。

var currentSrc = imgEl.currentSrc || imgEl.src;

我没有找到任何关于Safari＆amp;的可能解决方案的信息。 currentSrc。

Answer 1

您可以使用naturalWidth属性作为Safari的后备广告。

尽管规范说naturalWidth应该给出DPR校正的宽度，但似乎在WebKit中它返回图像的固有宽度而没有DPR校正。因此，如果currentSrc不存在，则仅将其用作后备。

注意：某些版本的Edge仅支持x个描述符，并且也不支持currentSrc，但我不知道它对naturalWidth的作用。较新版本的Edge支持w和currentSrc。