Integrate lazy-loading with a webflow slider

Hi,

I’m using a lazy-load script to help improve load times on an image-heavy site.

I’ve opted to use the Lazy Load XT plugin as it supports video (which I’m also using a lot on the page) and srcset used by webflow’s responsive images.

The script works by replacing the existing src and srcset with data- attributes. I’m using JQuery to achieve this:

$("img.lazy").each(function() {
    $(this).attr("data-original",$(this).attr("src")).removeAttr("src");
    $(this).attr("data-srcset",$(this).attr("srcset")).removeAttr("srcset");
});

The Lazy Load XT plugin then auto-initialises by looking for images with class .lazy and does its thing.

It all works great with normal images but It does not work in the webflow sliders I have on the page – the first image loads fine but no other images in the slider load.

I guess something about the way the webflow slider works is preventing the 2nd and subsequent images from loading.

The plugin has an updateEvent option to trigger it but I can’t figure out how to hook this up to the webflow slider events.

I realise 3rd party plugin integration is not officially supported but any advice would be gratefully received!

Thanks.

Isolated test page (notice how first image loads then subsequent image do not): http://tenfold.webflow.io/slider-lazy-load-test

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.

Hi, @tws

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.

$(document).ready(function() {

	window.lazySizesConfig = window.lazySizesConfig || {};
	window.lazySizesConfig.init = false;

	$('.lazyload').each(function() {
		$(this).attr('data-src', $(this).attr('src'));
		$(this).removeAttr('src');
		$(this).attr('data-srcset', $(this).attr('srcset'));
		$(this).removeAttr('srcset');
		$(this).removeAttr('sizes');
		$(this).attr('data-sizes', 'auto');

		lazySizes.init();
	});

});
3 Likes

Wow, this is really cool, thanks @matt50! I think this is exactly what we’re looking for, and I appreciate your custom code.

Would you mind telling me where to add your custom code? I’ve tried adding it to just about everywhere (head, body, footer), but the actual code is visible on the website when I do that.

I’ve also added the lazysizes script <script src="lazysizes.min.js" async=""></script> in the body of the page.

I’m not sure what I’m doing wrong. Any direction would be greatly appreciated, thanks!
Brent

Hi Matt , not sure if you’re still around Webflow these days, but if you are could I trouble you to share your insight on placement of the code for this? Thanks so much!

Hi @tws

If you’re not familiar with <script> tags and where to place custom code on the page, I’d start by reading this (the rest of these instructions assume you have read this!):

If you have sliders on multiple pages (site-wide), then you’d place the code as described in the “Body Code (Entire Site)” section.

If your slider(s) are only on one page in your site, place the code as described in the “Individual Page Head/Body Code”.

So, whichever you choose, first add this to the “Before </body> Tag” panel:

<script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/3.0.0/lazysizes.min.js"></script>

<script>
$(document).ready(function() {

	window.lazySizesConfig = window.lazySizesConfig || {};
	window.lazySizesConfig.init = false;

	$('.lazyload').each(function() {
		$(this).attr('data-src', $(this).attr('src'));
		$(this).removeAttr('src');
		$(this).attr('data-srcset', $(this).attr('srcset'));
		$(this).removeAttr('srcset');
		$(this).removeAttr('sizes');
		$(this).attr('data-sizes', 'auto');

		lazySizes.init();
	});

});
</script>

Then add a new class lazyload to 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 :

Good luck!

7 Likes

Matt, thanks so much!!! This was easier to implement than I thought, thanks to your great instructions. It works like a charm, very appreciative for the help.

You’re welcome, good to hear you got it working :+1:

1 Like

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 :confused:

@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.

2 Likes

Ended up implementing like this.

Let me know what you think. Thanks!

1 Like

I would need to see the published page to render an opinion. Please share.

Does this work for CSS Background images?

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;

loading="lazy"

No scripts needed. Hopefully Apple will implement this in Safari.

1 Like

@webdev
When implementing loading="lazy", I am getting the following intervention when inspecting my site on chrome:

Is this something worth addressing? If so, how?

My links, should you need them:
published: https://www.milkshaken.net/
read only: https://preview.webflow.com/preview/milkshaken?utm_medium=preview_link&utm_source=dashboard&utm_content=milkshaken&preview=239060f8817d66eb084e4bc18c6da8cd&mode=preview

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.