How to add Lazy Load on Webflow

Author:
Scott Boyington
Published on:
July 25, 2020
| Updated on:
July 25, 2020 7:16 PM

Lazy loading (or asynchronous loading) is a missing component in Webflow at the moment. It is an extremely useful tool, able to load images, videos, and components as you scroll through them into view or just off screen. This will result in reduce initial load as users enter your website.

How to add Lazy Load to Webflow

We have a work around to add in lazy load with not much hassle.

1. Add this code to your footer in page settings. If using across your website past in the “before body tag”.

<!-- lazysizes v5.1.0 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.1.0/lazysizes.min.js"></script>
<script>
/**
* lazysizes noscript plugin v5.1.0
* https://raw.githubusercontent.com/aFarkas/lazysizes/master/plugins/noscript/ls.noscript.min.js
*/
! function(a, b) {
var c = function() {
b(a.lazySizes), a.removeEventListener("lazyunveilread", c, !0)
};
b = b.bind(null, a, a.document), "object" == typeof module && module.exports ?
b(require("lazysizes")) : a.lazySizes ? c() : a.addEventListener(
"lazyunveilread", c, !0)
}(window, function(a, b, c) {
"use strict";
var d = {
nodeName: ""
},
e = !!a.HTMLPictureElement && "sizes" in b.createElement("img"),
f = a.lazySizes && c.cfg,
g = function(a) {
var b, f, g, h, i, j = a.target.querySelectorAll("img, iframe");
for (b = 0; b < j.length; b++) f = j[b].getAttribute("srcset") || "picture" ==
(j[b].parentNode || d).nodeName.toLowerCase(), !e && f && c.uP(j[b]), j[b]
.complete || !f && !j[b].src || (a.detail.firesLoad = !0, h && i || (i = 0,
h = function(b) {
i--, b && !(i < 1) || g || (g = !0, a.detail.firesLoad = !1, c.fire(a.target,
"_lazyloaded", {}, !1, !0)), b && b.target && (b.target.removeEventListener(
"load", h), b.target.removeEventListener("error", h))
}, setTimeout(h, 3500)), i++, j[b].addEventListener("load", h), j[b].addEventListener(
"error", h))
};
f.getNoscriptContent = function(a) {
return a.textContent || a.innerText
}, a.addEventListener("lazybeforeunveil", function(a) {
if (a.detail.instance == c && !a.defaultPrevented && null != a.target.getAttribute(
"data-noscript")) {
var b = a.target.querySelector('noscript, script[type*="html"]') || {},
d = f.getNoscriptContent(b);
d && (a.target.innerHTML = d, g(a))
}
})
});</script>
<style>
/* lazysizes fades image in after load */
.lazyload,
.lazyloading {
 opacity: 0;
 min-height: 200px;
}
.lazyloaded {
 opacity: 1;
 transition: opacity 400ms;
}
</style>

2. Now that we have the code added, we can now move on to the next part. We now need to make two different HTML embeds with two different scripts. This will tell the browser to not load your image on load.

a. In the first embed we need to add

<div class="lazyload" data-noscript="">
<noscript>

And change the class to “lazystart”

b. In the next embed we need to add

</noscript>
</div>

Then change the class to "lazyend".

3. Now we wrap these two embed's around the image or video you are trying to Lazy Load.

4. Next we need to add a "class" to the element you are surrounding.

That’s it!

You have now added lazy load to your website. To see it in action, simply open your browser inspector and go over to network. Toggle on "img" and reload your website. You will see all the images which appear on first load. While you scroll down the page, you will see the images that you lazy loaded appear in the same column with the other images.

Want to see it in action? Please take a look at your showcase to test this out yourself.

https://preview.webflow.com/preview/lazy-load-cascadiaitservices?utm_medium=preview_link&utm_source=designer&utm_content=lazy-load-cascadiaitservices&preview=43310ab21fda03cd9b3dcfd8718b396a&mode=preview

Need help or want someone professional to install this for you? Come chat with us.

https://www.cascadiaitservices.com/pricing

Source:

https://forum.webflow.com/t/lazyload-for-webflow-images/73131/38?u=cascadiaitservices

https://en.wikipedia.org/wiki/Lazy_loading

Category:
Webflow Tips
Tags:
Tips and Tricks
Webflow Tips

LATEST Posts

Site Redesign

Working on changing the site into the new sleek website...

Read More

How to get reCaptcha 2.0 Working on Webflow While Posting to an External Server

How to use reCaptcha with forms that are posted

Read More