What issue with 5.1.0? Seems to be working fine on the site I made https://fooxea.com
1 Like
EDIT:
I apologize. It works perfectlyā¦ I had the impression it was loading on page load because the intersection observer of lazysizes probably has a rootMargin higher than 0ā¦ I have set up the placeholder to be 500vh instead of 100vh and the image loads only after having scrolled quite a while before gettin into view.
By the way @nxwebflow, I tried with the lazysies v5.1.0 plugin as well, everything works as expected.
Thanks again @webdev !
1 Like
Is it possible to adjust when the image gets lazyloaded?
1 Like
Options are visible at:
2 Likes
Hi guys! Very rookie questionā¦ Do you need to upload a low-res version of every image you want lazy-loaded or does the plugin create one for you (maybe blurred like Medium.com)?
1 Like
With the technique @webdev suggested, you donāt need to upload low-res version of every image since the lazysizes extension will lazy load the native webflow srcset image.
If you want to use the LQIP technique (low quality image placeholder) with nice blury effect, I suggest you use Cloudinary which offers alot of amazing options. Youād host one high res master image on their platform, they then do the rest for you: deliver the right image size, resolution, dpr, format etcā¦
1 Like
Ah it makes sense! So expensive though.
Thank you for the help @anthonysalamin 
1 Like
Hey @anthonysalamin, Iāve been looking around trying to learn more about CDNs and stuff. I found a cheap one called imagekit.io the only issue is that to make it work you would need to replace the img-src links for every image from uploads-ssl.webflow.com/path/to/my-image.jpg to https://ik.imagekit.io/rooki/path/to/my-image.jpg.
Is there any automated to do that since Webflow doesnāt let you change the src attribute? Or does Cloudinary do it for you? I feel like the only way to do it now is implementing images with custom HTML but I donāt think it would work in my case because Iām using the CMS.
1 Like
I donāt know imagekit.io, if I were you I would use the noscript method suggested by webdev to wrap your cms images in order to lazyload them. If you upload the image via Webflow CMS, there is, to my knowledge, unfortunately no way to change the path to your images as you suggested.
1 Like
Hi @webdev and @anthonysalamin, just tried to implement your lazyload method but it doesnāt work. The whole wrapped element doesnāt load at all.
Hereās my head code (I also load the unveilhooks plugin for background images):
<script src="https://cdn.jsdelivr.net/npm/lazysizes@5.1.0/lazysizes.min.js" integrity="sha256-fTBo7ekO22pjfhP1rQs1prKEo4Iu8eVPODvm0oOL5Xc=" crossorigin="anonymous"></script>
Hereās my RO link: https://preview.webflow.com/preview/rooki-design?utm_source=rooki-design&preview=245da9daed8d9b3944285b3e9b73d0ba&mode=preview
1 Like
@Edoardo_Rainoldi, you forgot to load the noscript extension from lazysizes.
Here is the code youāre looking for:
<!-- lazysizes v5.1.0 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.1.0/lazysizes.min.js"></script>
<script>
/**
* lazysizes noscript extension 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>
Hope that helps.
1 Like
@anthonysalamin I actually loaded it and loaded the unveilhooks plugin as well, which should work for background images (most of my images). They seem to loade as ālazyloadedā but it still loads all of them right away.
Could you give it a look and see if it works?
Live site: https://rooki.design
1 Like
I suggest you get the lazysizes noscript plugin running on a simple page without all the other third party scripts running, then add things back one at a time and test. To many moving parts for an easy debug.
2 Likes
@webdev @anthonysalamin I tried to set it up here https://edoardo-rainoldis-beautiful-project.webflow.io/
Can you guys tell me if itās working for you?
1 Like
from what I see on the network panel from chrome, everything is loaded on page load - nothing lazyloaded. Like webdev suggeted, maybe try to come up with a simpler prototype easier to debug.
1 Like
Hey @anthonysalamin that website is as simple as it gets, I donāt know what Iām doing wrong 
I just copied @webdevās tutorial but it still doesnāt workā¦
1 Like
You are trying to lazyload everything at once. You have wrapped the entire āmainā element containing all the lazyload classes inside the custom embeds. Try to wrap images you want to lazyload instead like so:
1 Like
@webdev @anthonysalamin could you check why my product images arenāt being lazyloaded on mobile? It lazy loads on desktop but not mobile.
Here is my read only link
1 Like
Thanks for all the great help!
Iāve got lazyload working, in that it replaces my solid svg with the photographs over time, but I am sure that everything is still loading at once, and not respective of whats available in my viewport. It also loads a lot slower than it originally did - Iāve wondered if thats because of the added CDN load?
Any help is muchly appreciated 
Live example: www.apointin.space/photography
Read only site: https://preview.webflow.com/preview/apointinspace?utm_source=apointinspace&preview=7a8b38fa097dc06b1e957b253969c368&mode=preview
1 Like
Hello @kivexnz,
All your images are being lazyloaded, have a look at the network while scrolling - you will see your images appear progressively in the network pannel. As for the images being slowly loaded, I had a look, most of your images are 2500 px wide and weight about 2mo, I think there is no need for that. From your project we canāt see the custom code you used for the lazyloading since it is most probably set in the project setting.
1 Like