Vanilla-lazyload: Responsive design and unknown image size

Created on 30 Jan 2017 · 4Comments · Source: verlok/vanilla-lazyload

Hello,

my website is fully responsive by using flexbox, therefore I don't know in advance the size of the image in the viewport. Is there a way to modify your plugin to avoid lazyloaded images to reflow the page ?
Maybe with the tech explained here: http://alistapart.com/article/creating-intrinsic-ratios-for-video

Thank you

Enhancement

Source

Cyriltra

Most helpful comment

The trick seems to use a calculated padding-bottom as explained here:
http://andyshora.com/css-image-container-padding-hack.html
https://www.smashingmagazine.com/2013/09/responsive-images-performance-problem-case-study/

Padding Bottom = (Image Height / Image Width) * 100%

I think it would be great if your plugin can already reserve the space needed for the image when no dimensions are specified.

Thanks

Cyriltra on 31 Jan 2017

👍3

All 4 comments

Uhm... This script is just to lazy load images, so make sure the images are loaded as they enter the viewport. It supports the picture tag and the IMG tag with the srcset and sizes attribute. This should do in the majority of cases.

Your case is very singular, if I understood correctly. Do you have a link I can look at?

verlok on 30 Jan 2017

Padding Bottom = (Image Height / Image Width) * 100%

I think it would be great if your plugin can already reserve the space needed for the image when no dimensions are specified.

Thanks

Cyriltra on 31 Jan 2017

👍3

Hello @Cyriltra, I suggest you to find a different script to do the trick you're looking for.
Try @aFarkas's LazySizes, for example.

verlok on 26 Mar 2017

Let's say users will be uploading the images. How do I then use srcset for responsive images when displaying them, if I don't have the image to alter beforehand?