Lazy loaded Bootstrap tabs

Lazy loading Bootstrap tab pages.

Bootstrap defines a navigational component of type tabs or pills that can link to pages or in-page elements.

Linking to a full page is often not gracefull as it creates a full page load, and may sometimes not even be an option (for instance when tabs appear inside a form).

On the other hand, linking to in-page elements means the tab content must already be present in the page. If many tabs are present while only a few are usually used, the page request is unnecessary large and slow.

The Sircl Bootstrap extensions allow you to combine both benefits: have tabs or pills to in-page elements but load their content only when effectively used.

The setup is simple: add an ifactivetab-load attribute to the tab-pane elements. The attribute contains a URL that will be loaded when the tab (or pill) becomes active. The server response to the URL request will replace the current content of the tab pane. Note that each tab is loaded only once: leaving the tab and comming back to it will not re-initiate a web request.

In the following example, the tab panes (lines 12 to 15) have an ifactivetab-load attribute. Since the first tab is initially active, its content will immediately load. The content of the second tab will only load when activating that tab:

<ul class="nav nav-tabs">
  <li class="nav-item">
    <button class="nav-link active" data-bs-toggle="tab"
            data-bs-target="#t1">Brown Fox</button>
  </li>
  <li class="nav-item">
    <button class="nav-link" data-bs-toggle="tab"
            data-bs-target="#t2">Lorem Ipsum</button>
  </li>
</ul>
<div class="tab-content">
  <div id="t1" class="tab-pane fade show active"
       ifactivetab-load="/Samples/BrownFox">...</div>
  <div id="t2" class="tab-pane fade"
       ifactivetab-load="/Samples/LoremIpsum">...</div>
</div>

This example used Bootstrap 5 syntax.