Lazyload picture

[patrickschaper]

This merge request adds a desired feature: Lazy loading for picture/source elements. This feature is important as srcset attribute cannot handle pixel density and viewport width at the same time.

[marcamos]

This just saved me – thank you @yesman82! @desandro this should definitely be merged in order to support <source> elements.

[desandro]

Thank you so much for this contribution. I plan on working on Flickity again in 2021. This feature will be evaluated for merging in then. Thank you for your patience.

[luksak]

This fixes the issue for me. Thank you!

[luksak]

As a side-note: I wasn't able to get this to work with flickity-fade. But that probably has to do with my lack of npm foo :smile:

[tobipch]

I'd strongly welcome if this feature would be merged into Flickity. We really need to use the picture tag instead of the img tag because we have to control when which image gets loaded as they have different aspect-ratios.

[Samuell1]

Any info on this? @desandro Thanks!

[5BYFIVE]

Used this update today to help speed up a client site using picture tag for displaying different images for mobile/desktop. This should definitely make it into the main branch!

[bansavage]

It's been 5 years since original issue --> https://github.com/metafizzy/flickity/issues/161#issuecomment-493670392

Can we please merge this and create a release?

[Cipscis]

I'd like to see this pull request merged so I can use the element to implement support for serving WebP images in supported browsers when using Flickity.

[gauravmanerkar]

Hi,

When this PR will get merged?

[juukie]

I've tested this solution. Works great! Would love to see this getting merged soon.