在Safari上獲取響應圖像的當前環境

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。