javascript - 在 Safari 上获取响应式图像的 currentSrc

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

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 的可能解决方案的任何信息。

最佳答案

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

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

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

关于javascript - 在 Safari 上获取响应式图像的 currentSrc，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/33231426/