Streaming live at 10am (PST)

Integrate lazy-loading with a webflow slider


#1

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


♪ Lazy Load - Anyone could make it happen?
#2

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.


#3

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();
	});

});

#4

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


#5

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!


#6

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

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.


#8

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