在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&的可能解决方案的信息currentSrc.

Answer 1

您可以将该naturalWidth属性用作Safari的后备.

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

注意:某些版本的Edge仅支持x描述符并且也不支持currentSrc,但我不知道它的用途naturalWidth.更新版本的Edge支持w和currentSrc.