4

I am trying to define a placeholder for when I click an image with photoswipe plugin. I would like to define exactly the same version of my responsive image as the image displayed on my screen. 

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 "

Above are the different versions of my image.

My challenge is to get the current image displayed. For this, I use the currentSrc property, which works fine on Firefox and Chrome, but not on Safari.

var currentSrc = imgEl.currentSrc || imgEl.src;

I didn't find anything about a possible solution for Safari & currentSrc.

Andrew Myers
  • 2,754
  • 5
  • 32
  • 40
BrownBe
  • 977
  • 3
  • 11
  • 23

1 Answers1

5

You can use the naturalWidth property as a fallback for Safari.

Although the spec says that naturalWidth should give the DPR-corrected width, it appears that in WebKit it returns the image's intrinsic width without DPR-correction. So only use this as a fallback if currentSrc does not exist.

Note: some versions of Edge support only x descriptors and also lack support for currentSrc, but I don't know what it does for naturalWidth. Newer versions of Edge support w and currentSrc.

zcorpan
  • 1,243
  • 6
  • 11
  • Adding some info: Edge 12 doesn't offer `currentSrc` but Edge 13 does. Safari 9.1 supports `currentSrc` now but I don't know when that started. – fregante Mar 27 '16 at 07:04