javascript - 在 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 .