在Safari上获取响应图像的当前环境

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浏览器& currentSrc一个可能的解决方案什么。

Answer 1

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

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

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