lazy-images does not work with srcset

[BlindDespair]

Thank you for creating this plugin. Although unfortunately when I tried it out it didn't work for me. src were not replaced with data-src and all the images were loaded instantly. But it did produce a lot of layout shifting due to image size changing. All I did was just included the plugin in defaultPostrenderes and that's all. But even if the sizing issue is gone, I checked the source code and it's lacking handling of srcset which I have quite a lot on my site. I could help addressing these issues, but I need some guidance.

[marcjulian]

@BlindDespair yes the content will shift when the images are loaded lazily. I think the following line is only getting the attribute src and not srcset from an img element. You could check if either src or srcset is available as attribute to handle both scenarios.

https://github.com/notiz-dev/scully-plugins/blob/e00bc68c11ecc4c5d5ed3952d2a80c8d94a3e6a5/plugins/lazy-images/src/lazy-images.js#L26

[marcjulian]

Actually the content should not resize when the images are loaded lazy. An empty svg with the size of the image is added as a placeholder to the src attribute of the img element, thus the content around the images is already in place and the placeholder svg is replaced by the actual image if scrolled in to viewport.

https://github.com/notiz-dev/scully-plugins/blob/e00bc68c11ecc4c5d5ed3952d2a80c8d94a3e6a5/plugins/lazy-images/src/lazy-images.js#L44-L47

[BlindDespair]

@marcjulian thank you for the response. Actually I figured what was screwing me up was Angular, when it was bootrapping on top of the prerendered page, it simply threw out the img tags with data-src attributes and recreated them again with srcs. That's why all the images were still loaded after startup instead of lazy load. So I instead wrote a really simple angular-based solution with a directive and a service that do the lazy loading. Unfortunately, a scully plugin was not good for me in this case.