lazyload picture

[ma-5]

Can you please add to carousel lazyload support for HTML PICTURE:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture

[ma-5]

Because only with PICTURE i can use jpeg/webp mime types ¯_(ツ)_/¯

[NaotoshiFujita]

Do you know how to do that?

[ma-5]

For example srcset and src can not exist or can have got blank image like svg placeholder here. JS should copy data-lazy-srcset to srcset in all <sources> and copy in img data-lazy-src to img src

<picture>
    <source type="image/webp" media="(min-width: 768px)" srcset="data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22/%3E" data-lazy-srcset="
        ./images/[email protected],
        ./images/[email protected] 2x
    ">
    <source type="image/webp" media="(max-width: 767.9px)" srcset="data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22/%3E" data-lazy-srcset="
        ./images/[email protected]
    ">
    <source type="image/jpeg" media="(min-width: 768px)" srcset="data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22/%3E" data-lazy-srcset="
        ./images/[email protected],
        ./images/[email protected] 2x
    ">
    <source type="image/jpeg" media="(max-width: 767.9px)" srcset="data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22/%3E" data-lazy-srcset="
        ./images/[email protected]
    ">
    <img src="data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22/%3E"  data-lazy-src="./images/[email protected]" alt="image" width="200" height="200">
</picture>

[kenmorse]

Support of the picture element would provide a nice fallback for webp images too:

<picture>
  <source data-splide-lazy-srcset="image.webp" type="image/webp" />
  <img data-splide-lazy="image.png" alt="sample image" />
</picture>

[StudioAl]

As this project appears to be no longer supported, I wanted to chime in with what's worked for me here instead. As most modern browsers now inherently support loading="lazy", and their criteria for deferring loading includes most scenarios in which an images is not viewable or offscreen (including when it is positioned or transformed outside of the visible area), I'm finding that disabling Splide's lazyLoad option and instead just using the standard html "lazy" attribute (which is, of course, compatible with and ) is working as desired and allows me to use standard / syntax and still defer the loading of inactive slides.

[ma-5]

yep it's nice idea