Custom code for CMS lazy load images

This was super helpful, but it doesn’t work for my site on mobile. The load is triggered but the second batch of image never renders.

https://june-castro.webflow.io/

This is a serious thing, but no one from the Webflow staff bothers to react on this. Just a simple ‘No’ is also an answer.

Lazyloading is now standard in Webflow though?

also in CMS? Maybe i was a bit bluntly here, but i cannot find that

Webflow currently adds the loading=lazy attribute to images that are embedded in RTF’s bound to CMS collection items. So native lazy loading is present on template pages and collection lists.

What does not happen is Webflow’s responsive image generation, for images that are embedded in RTF’s, bound to CMS collection items. So you need to make sure you are uploading optimized and correctly sized images into your RTF’s or your visitors will suffer.

1 Like

Thanx for the answer, much appreciated

Thanks for the update. We’re currently seeing CMS collection images decidedly not lazy load and I’m unclear on the setup we’d need for these to lazy load. Our images include PNG, SVG, JPG and we have GIFs that are particularly important to defer. We often place these in long articles via the “add image” functionality in Designer and Editor by hitting the (+). Can you please share specifics on how to ensure images are lazy loading?

If a browser supports the loading attribute it should work. If not then you would need to use custom code or a library to handle lazy loading. You can make the determination if an image is loaded lazily by using browser dev tools.

For supported browser you can view =>