Routable tabs stop loading all content in same time

Questions
1

Hello,

I use routable tabs for my app and when I open the app all ajax function from each tab is loaded in same time. How to separate them to start loading when I press on specific tab?

var app = new Framework7({
  routes: routes,
  view: {
    unloadTabContent: false,
    componentCache: false,
    xhrCache: false,
  },
});
var routes = [
  {
    path: '/',
    url: './index.html',
  },{  
    path: '/catalog/',
    url: './pages/catalog.html',
    on: {
      pageInit: function(event, page) {
        //ajax runing in same time with homepage + 2 more tab pages
      }
    }
  }
];

index.html

<div class="views tabs safe-areas">
  <div class="toolbar toolbar-bottom tabbar-labels tabbar lamp-tabbar tabbar-highlight">
    <div class="toolbar-inner">
      <a href="#view-home">home</a>
      <a href="#view-catalog">catalog</a>
      .. + 3 more tabs, all loading from begining
    </div>
  </div>

  <div id="view-home" class="view view-main view-init tab tab-active" data-name="home">
    <div class="page" data-name="home">...</div>
  </div>

  <div id="view-catalog" class="view view-init tab" data-name="catalog" data-url="/catalog/"></div>
</div>

catalog.html

  <div class="page" data-name="catalog">
    <div class="navbar">...</div>
    <div class="page-content infinite-scroll-content" data-infinite-distance="50" @infinite="loadMore">....</div>
  </div>