Removed the comment part in the custom code section. I was worried about wrapping the whole grid of images because I was worried it would disable the parallax animation. Would Parallax and opacity animations still work?
I don’t know if there would be a conflict. You should check that yourself.
I started the guide over again. I’m doing the responsive webflow method now. For each image do you write out the code into an embed block? I’m sorry for bad english
Yes, unless you are stacking images one after another ( image tag + image tag + image tag), then one would suffice.
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?
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.
Thanks for it, it’s brilliant.
Can you give more detail on how to do “Give your images a
lazyload class” ?
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.
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!
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 -> https://mathiasbynens.be/demo/img-loading-lazy
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.
@webdev I can’t deal with the amount of kittens on that page
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…