Streaming live at 10am (PST)

Custom code for CMS lazy load images

Hi guys

Does anyone know if it is possible to implement lazy load images through Webflow CMS?

If so, has anyone managed to succesfully implement any code for this?

I would love to hear any experience
Thanks!

Here is my public share link: LINK
(how to access public share link)

2 Likes

Would LOVE to know how to do that…

1 Like

Can anyone help? @Waldo?

I have it working with https://www.imgix.com/ on the fly image creation, and lazy loading via javascript.

Check out this thread.

OK sure, but is that for CMS?
And if so, how do I actually implement it?
I got very lost reading that thread.
Is the point that I need to embed some sort of code into my site that will then automatically make all images responsive to the device?

I have it working on both pages and CMS pages and CMS lists.

Go back to my post, read the documentation provided by the service API.

This is a complicated issue. It is complicated by the fact that you cannot change rendering of HTML with server side code, in webflow. In my opinion, there is no trivial solution.

Close.

My observations are based on testing I have done. My testing may not be complete. My observations may be incorrect or not. That would be up to you to test.

My Current Observations:

Until or if webflow has a switch that auto-generations code (data-src on an img tag for example) that would support lazy loading scripts, which replaced the srcset attribute, it is a waste of time to pursue this for most sites. There is a couple of wishlist items for this very feature. Please go vote.

But can’t I add a data-src value and properties to an image by swapping the name (srcset to xxxx-xxxx) with JS? Yes you can, however the browser already started to downloaded your image(s) before your lazy script fires off. Your main image (default) also is an issue. Can’t I just hide the images with CSS then run the code? You can, but most browsers still download that which is set to display none. Also what happens if there is no JS?

Unless, you are prepared to do something like I explained which is a technical challenge, requires third-party scripts, image generation, code and html embeds for image display, your stuck. Can it be done? Yes. Will you need to understand all the technical issues? Probably. Can I tell you how to do it in a topic in five minutes. Nope. Can I build it for you? Sure can. For free? Nope.

If i am wrong, please build a demo we can test. I would love to see it.

2 Likes

Hiya :slight_smile:
I just tried loading this site (http://imgix.net/), but it no longer seems to be active.
Do you still have an example of a CMS running using lazy load images?

The correct url is https://www.imgix.com/

Can I check out the site you built that incorporates the code? :slight_smile:

I created some tutorials on lazy loading here ->

https://wf-images.webflow.io/

2 Likes

Okay great! :slight_smile: Which one of those methods can be used for images within the CMS?

Hey, try this:

2 mins and you’re done :wink:

1 Like

Heya, great read, but how can this be applied to lazy loading CMS images? :slight_smile:

This is exactly lazy loading CMS images. You cap the number of images to 9 or 12 or whatever, then you hide the pagination, and it will load automatically. Done in 3 mins :slight_smile:

You do understand this is for an individual CMS item, not a CMS collection?

No, it’s for collections. I’ve been using this feature and it acts as if lazy-load for CMS collections. Just as is says in the article.

No, I mean this thread is about a CMS item, not a collection. You must have read it wrong

I don’t get it:

If you want to lazy load images, which are collection items, which are in a collection list… otherwise please help me understand :slight_smile:

It is to lazy load images within a blog post

Yes, that will work…