hi🙂, at my website, there is a page, where we post our jobs, i want this box to load when we scroll…how to add lazy load to this block, image is attached. i will be very thankful to you.
If you mean that you have > 100 items and you want the collection list to automatically load more items when you scroll past the first 200, check out Finsweet Load, the infinite scroll setup.
If you mean your data is stored somewhere else like Airtable and you’re pulling it in dynamically, you’d just build your own custom query process that triggers on scrolling. FS Load’s API can support that as well with some work, check the API page for details.
thanks, no matter this box has 1 job or 50, i just want this box to not load with website, but to load when we scrol, just like we implement lazy load to the images.
If the content is coming from the CMS ( <= 100 items ) or static elements, it’s already loaded in the page.
I think you might be talking about a visual effect? Not lazy loading, but just having the elements hidden and then appear as you scroll?
You can use interactions for that.
This part of the website is causing the page to load slowly. I do not want this part to be loaded when the website opens. Instead, I want it to load when someone scrolls down, just like lazy loading.
I still think you might be confusing the concepts of “loading” and “displaying.”
In Webflow 100% of the HTML content on the page is loaded in that initial HTML file. Images are separate, which is why HTML offers a lazy load feature. Natively, you can’t delay loading of part of the page and load the rest.
You also wouldn’t see a performance boost there unless your page HTML is massive- which is also not easily possible in Webflow. Collection lists are limited to 100 items, etc.
UX’s which deal with a huge amount of content like Facebook use a technique known as infinite scrolling, where as you scroll, script is triggered to load more content from a database.
In Webflow you don’t have that, but you could mimic it at a smaller scale using a collection list and Finsweet’s CMS load library.
- Put your content in a collections list;
- Set the pagination size small, e.g. 3 items
- Setup FS CMS load
- Configure it for infinite scroll
This whole construction probably would work best at the bottom of your page.
The only other way to lazy-load content is to split it into a different page and write scripts to load it. HTMX should be able to do this with a revealed trigger, something like;
<div id="lazy-load-section"
hx-get="/path-to-lazy-content"
hx-trigger="revealed"
hx-swap="outerHTML">
<!-- This element will be replaced with
the loaded content when the user scrolls here -->
<p>Loading...</p>
</div>
thanks, please have a look at this website, https://cryptocurrencyjobs.co and attached image of this site. job listing boxes are lazyloading, i guess, when we open this website, these box loades at the end,i think, when we scrole down. thats what i want .
No those are images. See the “png”.
there is something i do not know, because when ever i opened this website, these boxes open after i scroll and wait for couple of seconds.
@arslan.2010 Shan, the HTMX recommendation is a breeze to implement and the DOM won’t be bloated with nodes since they don’t exist until your trigger is activated.
1 Like
That’s not a Webflow site. What’s your site?