where do you get the url for each image?
View page source or inspect elements with developer tools in your browser.
so you upload the image to webflow, drag it into the website. Then publish and go into inspect element for the urls and then add the image through an embed with all the code written out pointing to the image urls?
That is what I did for the demo since Webflow has to generate the responsive images for me to use.
Quick question: Does webflow generate different various responsive sizes for animated GIFs also? Surely not.
I put this on a collection list and it worked great except it knocked out my animations. is there a way to use this with the class and custom attributes in web flow instead of the code embeds?
@webdev @cheechee — Unfortunately, this seems to be preventing images from loading with this method applied…
With custom embed
Without custom embed
I’ve the supportPicture script in my global custom code.
What do you think I’m doing wrong?
If you look at your source you can see you are closing the lazyload div before the image. So you have an ordering issue. Also you images are tiny , so not much benefit on this page.
Also you are loading an additional version of jQuery. jQuery is already loaded with Webflow.
<div class="w-embed">
<div class="lazyload" data-noscript="">
<noscript>
</div>
<img src="https://assets-global.website-files.com/5c45354be0065637fc93b198/5d4cbdb07ec366e0d4c3d68a_fs-members-at-solar-farm-tiny.jpg" alt="Future Super members at a solar farm they invest in" srcset="https://assets-global.website-files.com/5c45354be0065637fc93b198/5d4cbdb07ec366e0d4c3d68a_fs-members-at-solar-farm-tiny-p-500.jpeg 500w, https://assets-global.website-files.com/5c45354be0065637fc93b198/5d4cbdb07ec366e0d4c3d68a_fs-members-at-solar-farm-tiny.jpg 800w" sizes="(max-width: 952px) 84vw, 800px"/>
Just a heads up to anyone that might use the < noscript > method and export the code from Webflow. Appearantly there is a Webflow bug with code export that messes up the closing of noscript tag properly so the lazy loading with this method does not work with exported code out of the box.
For example, when lazyloading iframe, if you view source of a published WF site, it looks like it should and works:
<div class="lazyload" data-noscript=""><noscript></div>
<div class="html-embed-7 w-embed w-iframe">
<iframe></iframe>
</div>
<div class="lazy_after w-embed"></noscript></div>
However, when code is exported to ZIP, this happens:
<div class="lazyload" data-noscript=""><noscript></noscript></div>
<div class="html-embed-7 w-embed w-iframe">
<iframe></iframe>
</div>
<div class="lazy_after w-embed"></div>
For some reason < noscript > is closed right away and this breaks the lazyload
The fix is to move the closing of noscript tag back to his place manually.
Also notified WF support about that.
Best
2 Likes
Thanks for it, it’s brilliant.
Can you give more detail on how to do “Give your images a lazyload class” ?
Thanks !
We now have native lazy load in Chrome.
All you need to do is add a custom image attribute: loading=“lazy”.
Do remember to set the height of your images, to prevent bumpy scrolling and messed up anchor linking.
2 Likes
My god, this is amazing news, thank you !
I just found this article going into more detail:
Too bad other browsers will take 10 more years to implement such feature… 
I think using third party tools still is critical to serve as polyfill for other browsers…
@Marcel_Deelen what? Whoa! Totally missed that!
1 Like
I published a post about this a last month when it hit the release channel. It is a nice addition to Chrome, but that is all it is. It’s not the desktop where we need to improve the experience but more so on mobile / bandwidth constrained devices.
Maybe the webkit group will implement it for IOS. Since it does not appear to collide with other lazy loading techniques there should only be a positive impact.
Here is a test page where you can see it in action → loading=lazy demo
Supported values for the ‘loading’ attribute include:
- ‘lazy’ to defer the load until the image or iframe reaches a distance threshold from the viewport.
- ‘eager’ to load the resource immediately.
- ‘auto’ the default behavior, which is to eagerly load the resource.
See → Lazily load iframes and images via ‘loading’ attribute - Chrome Platform Status
1 Like
@webdev I can’t deal with the amount of kittens on that page 
2 Likes
Has anyone summarized the best practice techniques for this? I notice webflow has a nice way to turn on and off responsive images (adding srcset and generating variants), but no simple way to remove the src tag. This one SIMPLE change by webflow could enable simple lazyloading by default by just adding some js to add the lazyload class name to all images…
I provided quite a bit of content on the subject including two tutorials. If you investigate this deeper you will see that the issue is changing the src and srcset attributes to data-src and data-srcset. Webflow should have a flag on project settings to do it. They don’t.
I deal with this limitation by using Embeds with custom code and custom CDN images. The only issue is when you use JS to do it this way, you don’t see it in the designer without a LQIP.
Yeah, pretty disappointing. Having the flag seems like a simple no-brainer. Is there a place to vote this up? Also, is there a way to create a custom element in webflow? Like say, clone the image element, but then add some customizations? Another no-brainer, but I could not find a way. I am used to working with headless CMS / frontend combo and finding webflow’s approach a little hacky.
hopefully we do get a flag soon for lazyloading. Did you every find any info on your questions?
This is excellent! I followed your tutorial and it worked well except for the fact that I’m also running a script to make a CMS collection list masonry…the confliction between loads is causing alot of my images to overlap. Is there a potential solution to an issue like this?