Hi @matt50, did you ever find a solution to this? I would also like to lazy load videos in a slider.
Have you thought about putting an image over the embedded video, then having an “on click” trigger integration play the video after the image is clicked? Probably not the best solution, but might be an option if Lazy Load XT can’t be integrated. I’m going to try it for my situation…will let you know if it works.
I ended up using a plugin called ‘lazysizes’ instead. It appears to work much more nicely with sliders.
Lazysizes requires removal of src and srcset attributes for data-src and data-srcset then replaces them when loaded. As we have no control over the attributes, use JQuery to relpace them on page ready.
In case it’s helpful, to get it working, I added the class “lazyload” to the images I wanted to lazy load and initialised it with this custom code.
Then add a new classlazyloadto each of the images in your slider (or any other images you want to lazyload).
Then publish your site and view the public link and you the lazyload script should be working (note you need to publish first as custom code work can only be viewed after publishing – it cannot be seen in the editor!)
I hope this helps.
ps. if you’re new to using custom code (or web development in general), I’d recommend starting with some basics with a tutorial like these:
Then after that one, this is pertinent to what we’re doing while adding custom code :
Is the script above still working for you guys? I am trying to implement it but no matter what I do, the browser will always load the image right away if it has the src set. The script that is supposed to remove the src does not seem to be working
@cheechee - The code is running after the page has loaded. So the browser already started downloading resources, including those in the srcset . Normally you would want to use a small image for the src and then load up the additional resources via the data-src values. Since webflow creates srcset images on the fly and adds them to the img tag, you will have the same issue. I am using embeds and dynamically created images in the cloud the last time I needed to do this.
No. As an alternative you could use an image with object-fit:cover set and then you would also get the benefit of responsive images and you could lazily load them. Note: Current versions of MS Edge, Google Chrome, and Mozilla Firefox will lazily load images with just a custom attribute of;
No scripts needed. Hopefully Apple will implement this in Safari.
Since a deferred element (the image) doesn’t load until the user scrolls to it, you might get janky behavior since the browser does not know the size of the image so It can’t allocate space for the image. If you set dimensions on the image the placeholder will set as well.