我正在尝试为单击带有 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 的可能解决方案。
最佳答案
您可以使用 naturalWidth属性作为 Safari 的后备。
虽然规范说naturalWidth应该给出 DPR 校正后的宽度，看来在 WebKit 中它会返回图像的固有宽度而无需 DPR 校正。因此，只有在 currentSrc 时才将其用作备用不存在。
注意:某些版本的 Edge 仅支持 x描述符，也缺乏对 currentSrc 的支持, 但我不知道它对 naturalWidth 有什么作用.较新版本的 Edge 支持 w和 currentSrc .
关于javascript - 在 Safari 上获取响应式图片的 currentSrc，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33231426/