Search code examples
jqueryajaxjquery-ui-tabspreload

What JS do I use to preload the panel content for each tab before it's clicked on?

Right now I have some AJAX tabs that are loading external pages into an empty div when the tab is clicked, it creates a jerky movement since the div is empty and then quickly loads the content when your in the tab. Do you guys know a way to preload the pages so that they are already ready to go when someone clicks on a tab?

This is what I currently have so you can see what I mean..

http://testing.morecleanenergy.com/step_1

My current loading JS..

<script>
 $(document).ready(function(){
  $('#ajax-tab-container').easytabs();
});
</script>
Solution

  • Try something like this:

    $(document).ready(function(){
  $('#ajax-tab-container').easytabs();
  $("#tabs2").load('/tab2.html');
  $("#tabs3").load('/tab3.html');
  $("#tabs4").load('/tab4.html');
});

    If you use classes for the #tabs you can do a for each here instead but if you have only 4 tabs above code shold be fine.