search

desandro / imagesloaded

:camera: JavaScript is all like "You images done yet or what?"
https://imagesloaded.desandro.com
MIT License
8.88k stars 1.15k forks source link

Add support for SVG and <image> tag #277

Open hirasso opened 5 years ago

hirasso commented 5 years ago

Hi there, have been using this for ages, thanks so much! For a current project, I need to detect when images inside an SVG are loaded:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <g>
    <image class="lazyload" xlink:href="./images/image-1.jpg" x="0" y="0" width="100%" height="100%" preserveAspectRatio="xMidYMid slice"></image>
  </g>
  <g clip-path="url(#ic__mask)">
    <image class="lazyload" xlink:href="./images/image-1.jpg" x="0" y="0" width="100%" height="100%" preserveAspectRatio="xMidYMid slice"></image>
  </g>
</svg>

...would be a very nice thing if you would add support for images with xlink:href in imagesloaded :)

desandro commented 5 years ago

Thanks for this feature request.

Add a 👍 reaction to this issue if you would like to see this feature added. Do not add +1 comments — They will be deleted.

hirasso commented 5 years ago

...seems like the upcoming SVG 2 standard is dropping the requirement for the xlink: prefix. So the solution would have to check for both xlink:href or href attributes.

I hope I'm not the only one needing this ;)

neuropass commented 4 years ago

@hirasso I gotta ask. Why would you have an img inside an SVG?

hirasso commented 4 years ago

@neuropass https://ophelis.de/en/themen/akustik/ > scroll down a bit, the interactive image compare toy :)

It's just great for advanced masking of images. https://developer.mozilla.org/en-US/docs/Web/SVG/Element/image