Streaming live at 10am (PST)

Lazyload for Webflow Images

Unfortunately haven’t dealt with masonry a lot…maybe sharing a link would help so others can have a look :slight_smile:

1 Like

I noticed that when I added the class lazyload to the image, custom animations (only with set as initial state) do not work anymore… any tips?

See https://lazyloadingtestelvira.webflow.io/, third section (with the ugly green)

Share: https://preview.webflow.com/preview/lazyloadingtestelvira?utm_medium=preview_link&utm_source=designer&utm_content=lazyloadingtestelvira&preview=a8ccd4c8b58ada2cfb68cc043687e112&mode=preview

Hey Cheechee,
I face the same problem and move the noscript tags manually local. Do you have any updates on the problem from the customer support or anywhere else?
Would be a big help :pray:

Kind regards,
Marc

No I reported it but they don’t seem to care :))

Thank you for your effort though!

Hi @Marcel_Deelen, can I do this for background image (CMS)?

Thank you everyone for this excellent read. Particularly, a big thank you to @webdev for his easy-to-understand tutorials.

It seems like the easiest option (while proper native lazy loading is added; it is coming to iOS Safari, BTW, according to the latest Webkit bugs) is the noscript lazysizes option.

Has anyone had layout issues using the noscript method? I can get it working on some images, but on others (like inside grid), the images start overlapping. Once I remove lazystart and lazyend symbols, the layout is perfect.

I’ve gone off the deep end a bit: a Swiper.js container -> Webflow’s lightboxes, -> lazysizes noscript. Each part works independently great, but together, it must be a mess of Webflow JS + Swiper.js + lazysizes’s :sweat_smile:

If I figure it out, I shall post back. If anyone has tips, please let me know: I’ll try to create a clean (as clean as it can be) example soon.

Likewise, for future readers, let me organize all of Jeff’s tutorials here: