Lazy Loading for Images

Hello! I saw some posts about this but most were from a few years back and primarily around wish listing. Is someone able to help me implement lazy loading to all images on my site?


Here is my site Read-Only: https://preview.webflow.com/preview/brightfieldgroup?utm_medium=preview_link&utm_source=designer&utm_content=brightfieldgroup&preview=c76ea6730b1edefd1faef125605d8d39&mode=preview

Hey – Tom Bekkers over at flowbase.co has the best (and easiest) solution I’ve found: https://www.flowbase.co/guides/how-to-add-lazy-load-to-your-webflow-site

Simply added the js to the site’s custom code (or individual pages) and a combo class to any images you want to lazy load.

I implemented this site-wide on www.goodbooks.io (image heavy) recently and it made a noticeable difference.

Let me know how it goes :slightly_smiling_face:

Also, it might be worth swapping out the png logos on the preview link with SVGs. Some good resources:

Unfortunately this script does not seem to work (visually it seems it does, but in the background it does not)

See the network tab here (cache disabled): Dropbox - lazy.mov - Simplify your life

All the images are loaded right away, also the same on the site you posted (goodbooks).

The problem is that images have the “src” attribute set, as long as this is set most browsers will start loading it right on the load.

@cskelly some working (but unfortunately not AS simple as this) solutions in this thread: Lazyload for Webflow Images - #15 by cheechee

@jordanphughes nice work on the goodbooks page! Funny to see the text hover underline effect (my site and brand logo: https://wave.si/ :sweat_smile:)

Awesome, thanks for letting me know! I checked it out also and it looks like you’re right.

I’ve implemented the LQIP technique on my personal website prior, but it’s not practical for goodbooks.io (3,000+ images)…

Appreciate all your work on the other thread!