Получите текущую версию адаптивного изображения в 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,