cskelly
(Connor)
March 9, 2020, 10:21pm
1
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
Also, it might be worth swapping out the png logos on the preview link with SVGs. Some good resources:
seeklogo.com is the world's best vector logos, logo png images, logo templates, brand logos and icons source. You can download in PNG, SVG, AI, EPS, CDR formats
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/ )
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!