4

I have following code in my app: 

<picture>
    <source media="(max-width: 1300px)" srcSet={src.img['1']} />
    <source media="(max-width: 1599px)" srcSet={src.img['2']} />
    <source media="(max-width: 2049px)" srcSet={src.img['3']} />
</picture>

is it possible programmatically to check which of these images was loaded by browser in picture element? I have to use that image once again (now I use img['1'] by default in tooltip) but I want to avoid loading image one more time.

magnat
  • 407
  • 4
  • 18
  • A solution would be to set the expiratio ndate from your image, then clone it. You should take a look here : https://stackoverflow.com/questions/10365527/jquery-clone-image-reloads-from-server – Zenoo Jun 05 '17 at 09:13
  • 1
    The is a property current src : https://stackoverflow.com/questions/34366100/when-using-picture-source-and-srcset-how-check-which-src-was-loaded-img-src-i – Alex Nikulin Jun 05 '17 at 09:26

2 Answers2

1

Include the <img> tag inside <picture> and check its currentSrc property.

niutech
  • 28,923
  • 15
  • 96
  • 106
0

Normally I just open the console and then put this code in there.

console.log( img.src )

Remember that although you may use modern images like WebP with a JPG fallback, if WebP is supported it will not fall back.

Also you need to choose the element first or you will get image undefined.

Eoin
  • 1,413
  • 2
  • 17
  • 32