Streaming live at 10am (PST)

Custom code for CMS lazy load images

#1

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)

0 Likes

#2

Would LOVE to know how to do that…

1 Like

#3

Can anyone help? @Waldo?

0 Likes

#4

I have it working with imgix.net on the fly image creation, and lazy loading via javascript.

Check out this thread.

0 Likes

#5

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?

0 Likes

#6

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.

1 Like