Unfortunately haven’t dealt with masonry a lot…maybe sharing a link would help so others can have a look 
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)
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 
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 
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:
2 Likes
A few notes and updates:
- My layout issue above with CSS Grid: I fixed this by setting a defined height/width (px/vh), instead of a % value. This may be related to lazysizes not always playing nice with 100% dimensions (the “parent-fit extension” seems to discuss this).
- The noscript (both minified & non-minfied) plugin is now available on jsDelivr.
- To tweak lazysizes’ settings (detailed documentation here), here’s a generic format I’ve found that works:
<script> window.lazySizesConfig = window.lazySizesConfig || {}; lazySizesConfig.expFactor = 2.5; </script>
- For former users of browser-based native lazy-loading: you may encouter issues using the
loading="lazy"attribute in conjunction with lazysizes. I had some issues with pop-in on Firefox (the image loaded far too late and suddenly loads as you’ve already started to scroll past it!). After I removed theloading="lazy"attribute, all was well.
An aside: unfortunately, browser-based native lazy-loading is still at only ~64% support as of June 2020. Perhaps in two to three years, we’ll see it expanded. For now lazysizes is the easiest, cross-platform, and reliable lazyloading library for Webflow as far as I have seen.
1 Like
This thread has been exceptional, I’ve seen vast improvements in page speed so thank you to all involved.
My questions is slightly different, but still refers to techniques used here so I didn’t think it warranted a whole new discussion.
Is it possible to lazy load scripts?
I have some scripts that interact with images/divs that I am lazy loading, but of course the script fires before the div has loaded so no longer works.
How would I go about lazy loading the script at the same time as the divs the scrips effect?
Hello
I’m sorry I have to reopen this topic but it seems there is still an issue with the noscript method using the latest version of lazysizes (5.2.2). It appears all images are being loaded at the same time once the lazysizes noscript plugin detects the first image wrapped within its noscript tag.
- Here is my over simplified read-only link
- Here is a quick screen recording of the network as seen in the dev tool. As you can see, all three jpg images are being loaded at once.
- Here is the published link for you to try, if you like.
- Here is an over simplified codepen, reproducing my Webflow structure… still, all images are being loaded once the first image hits the plugin threshold.
Those are the script I load in the head tag:
<script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.2.2/lazysizes.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.2.2/plugins/noscript/ls.noscript.min.js"></script>
Here is a screenshot of my webflow structure:
here is the detail of lazy-start embed symbol:
here is the detail of lazy-endembed symbol:
I must be missing something, @webdev any idea maybe ?
Best,
Anthony
Has anyone been successful with the noscript loading method on multiple images ?
1 Like
Hi @anthonysalamin. I just took a look at this thread again (busy) and created a duplicate page updated with version 5.22 of both the core and the noscript plugin as a test. It is behaving as I would expect. The images are loading as I scroll. You can test yourself below.
https://wf-images.webflow.io/lazy/lazy-sizes-no-script-5-22
I was testing your pen and it is loading all the images at the same time. I just spent 15 min looking and can’t see the issue. I also tried wrapping all the items with one div and noscript wrapper, did not change the loading. I will try to dig back into this as soon as I get another chance.
3 Likes
Thanks alot, really appreciate ! Yea I don’t know, I’ve spent two hours trying to figure out what is wrong with my strucure. I’ve actually copy pasted your entire code source from your tutorial into codepen and gradually made it to the simplest structure but still, I couldn’t make it work - everything loads once the first noscript tag hits the plugin threshold. Really weird behaviour :) not sure why
Hi!
Getting into lazy loading here, since the introduction of the loading=“lazy” attribute, does this work for dynamic content as well via the CMS? Or just for static loaded images?
The noscript method listed here in the thread, does that work with background images?
Many thanks in advance
this is like the best thing that ever happend ever…
It would for all images loaded with the IMG tag with that attribute in supported browsers.
Background images loaded via CSS do not benefit from lazy loading techniques.
1 Like
I did… I just can’t make it work with CMS images though
Very Strange thing happening to me… I don’t know why… Everything works great but CMS images won’t show, they load and and are there, but wont show.
to me it looks like all images with noscript method are loaded at the same time, isn’t it ?
https://www.loom.com/share/796b6d308fe44435b3c129504719db56