Installing the Library
The current version (at the time of this writing is 4.18) is available at https://email@example.com/lazysizes.min.js
I added the script tag to this page's settings => Custom Code before body text area using the SRI version. You could paste it in the head since there are no dependencies.
<script src="https://firstname.lastname@example.org/lazysizes.min.js" integrity="sha256-fTBo7ekO22pjfhP1rQs1prKEo4Iu8eVPODvm0oOL5Xc=" crossorigin="anonymous"></script>
Next we add the ls.noscript.js library extension. It is small and not currently available on jsdelivr.com's cdn. I am going to add the script to this page's head in the page settings -> custom code -> before body area. If you are using it on all project pages, add the minimized version to your site Custom Html - as above.
lazysizes noscript/progressive enhancement extension
This technique involves wrapping the lazy load target with a Webflow embed element which is available to paid accounts.
The code we need to add is some basic HTML.
Convert that embed to a symbol called "lazystart" or whatever name you want. Next duplicate the procedure using the code below, then name the symbol "lazyend"
Now just add the symbol "lazystart" before the content you want lazy loaded and the symbol "lazyend" at the end.
OK, so where is the DEMO? Your looking at it. This entire content section on this page was lazily loaded. How can you tell? Look at the page source. You will see that a class of "lazyloaded" was added to the embed div that is the parent of the <main> child element that represents this content. You can also look at the network tab in devtools (chrome) and watch the downloads on scroll. </main>