Progressive loading of images

Design help Custom code
1

Hi,

Is there a way in Webflow to allow progressive loading of images? Images that are not rendered at page load time but when being scrolled in focus?

1 Like
2

Search this forum for “lazy loading”. I don’t know if some users got it to work with Webflow.

3

It should work on webflow - like any other JS custom code.

LazyLoad (vanilla-lazyload) (github 2579 stars):

“The problem” - you should add class="lazy" & data-src (webflow Custom attributes) for all of your images (Very tidy). But again it should work.

4 Likes
4

thanks for the answer guys. Need to look into this with our developers.

5

Hey mate, do you have a working example of this being implemented in Webflow?

Thanks for sharing vanilla-lazyload, btw!

6

There is only three ways to do this (based on my extensive research).

Two of them I documented here →

The third is dependent on third-party image CDN features that I have tested and been able to confirm I can do on the fly, with responsive images, and AI features, lazy loaded, based on dynamic scripts injected via data stored in a collection. - I plan on writing a complete tut on this, but need about 4-6 hours of free time to do it. It is the holy grail I have been seeking.

2 Likes
7

Sounds like the holy grail I’VE been seeking too! :trophy:

Would be absolutely thrilled if you found the time to write up a tutorial for all that!

8

What should the value of the data-src attribute be?

1 Like