Streaming live at 10am (PST)

Lazyload for Webflow Images

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?

https://preview.webflow.com/preview/fs-landingpages?utm_medium=preview_link&utm_source=designer&utm_content=fs-landingpages&preview=f9a96b276d1da76da259d427ab3727ca&pageId=5d3fd4742bc0d07d8ff0d6ad&mode=preview

@quarshcreative

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

1 Like

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.

28

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… :slight_smile: I think using third party tools still is critical to serve as polyfill for other browsers…
https://caniuse.com/#search=loading

@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 -> 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.

See -> https://www.chromestatus.com/feature/5645767347798016

1 Like

@webdev I can’t deal with the amount of kittens on that page :joy:

1 Like