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。

score 5 · Accepted Answer

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

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

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

1 回答 1