Force loading of a CMS collection list, or catch the "collection loaded" event

Hello Webflow fans,

I have a slider based on a collection list element, with text content of variable lengths. Because of this, I’ve built a JS function that equalizes the heights of the slides to make it nice. (Apparently the height: 100% CSS property isn’t “responsive” and once the height has been calculated, it doesn’t change.)

But in order to run it, the entire collection has to be loaded. I’ve already tried document.addEventListener('DOMContentLoaded', setEqualHeight) but the collection seems to have some sort of lazy load.

A timer works only if the collection list is visible on the window. If it is farther on the page, even with a timeout of 5 seconds, the function runs on an incompletely loaded list.

Any idea how to force the entire collection to load its CMS content, or how to trigger my function once it is done?

Thank you!

Does anyone have a solution? Do I have any option but to use a minimum height?

Which is not satisfying by the way. It doesn’t adapt well to changing screen sizes, even with breakpoints.

Collection lists are not fetched, the content is part of the html at delivery time.
However images within the content can be lazy loaded and that would affect layout size calcs. You can change that setting per image if you like, or include image dimensions where you use them, so the layout engine can compute accurately.

1 Like

Thank you very much! I assumed it was on the text because the overflowing contents had a longer text content. But I had two little SVGs representing quotation marks. By setting their loading to eager, I no longer have this issue!