Streaming live at 10am (PST)

TABS - Loading active tab plane only when tab is selected

Hello!,

Does any one know how to turn on and off tab planes when they are either active or in-active? I would like to stop the tabs that aren’t showing from being loaded until that specific tab has been selected.

I’ve used the tab module on my site and I have a fair chunk of information sitting within each of the Tab planes, as well as some custom built graphs with their own interactions/animations. I think it’s the animations and the amount of detail in the graphs that is slowing down the site speed. I’m pretty sure they are all loading at the same time even if that tab is not being shown.

I’m assuming theres a custom code solution out there. Can any one help?

Thanks!


Here is my site Read-Only:
https://preview.webflow.com/preview/conexus-financial?utm_medium=preview_link&utm_source=designer&utm_content=conexus-financial&preview=28e45d8750b8ba9c37df2985543f8c63&mode=preview

Hi Jade Elliott

Select tab from the navigator and update the settings as per the screenshot.

Hi Krishna thanks for the response!

Sorry, I’m unsure which settings you are referring to here?

Just recheck the layout options as per the screenshot attached

Hmm not sure if this solves my issue.

basically I’m trying to have each tab essentially “lazy load” (the same as an image would)

At the moment, I think all my interactions are playing on each of the tab planes at the same time even if that tab is not the active tab.

IMHO Using tabs for lots of content is really poor UX. Tabs are designed for comparing small amounts of content like content on an index card. Look at what happens with overloaded tabs on mobile. People can’t find the other content and get confused. Think mobile first when designing, your users will thank you. If you need to lazy load tab content you should probably use pages for it.

If this is your design choice you might want to consider using Ajax to load the tab content.

Thanks Jeff!. I’d have to agree with you on that in regards to the UX, the only issue is that the client really wants the tab functionality.

Il look into using Ajax.

Thanks for your help.

deleted by me as my response wasn’t solving not downloading elements into DOM but only not using tabs