Load Tab 2 content on page load

I am using the tab element. In the second tab, there are images coming from xano. Regardless of how long I have been on the page, the first time I switch to the second tab the images takes a second to load before popping in.

Is there a way to get this image to load immediately on page load so once I switch to the second tab, its already loaded?

I wonder if you could load the tab content into a variable and then use that in the tab?

Lets say you had a list view, click on an item and it loads the detail page with the tabs:

You could have the variable set when you first click on the list item, so it is there when the detail page loads

Or, set the variable when the detail page loads?

the reason this is happening is because your browser does not have the image on cache until the page ask for it. Tabs does not load content until a tab is active.
There is too solution

  • Make a call to your image so that the browser will have it in cache
  • Do not use the tab but your own system with a variable and use display instead of conditional rendering. This may slow down your page if your tabs are heavy.

I am still unsure if second option will work, to test you can try to have your image in the first tab with a display none and see if it is affecting the load time.

You can also check if your images are not too heavy (often image can be compress without any quality lost)