Tengo 10 pestañas en mi proyecto, cada una de ellas obtendrá algunos valores de la API usando PHP.
Se tarda entre 10 y 15 segundos en cargar la página cada vez (ya que actualiza los valores de las 10 pestañas)
¿Cómo cargo contenido solo después de cambiar de pestaña ?
Cargue TAB1 al inicio , luego solo después de hacer clic en TAB2 o TAB3 y luego cargue su contenido, pero no los cargue al inicio
Ejemplo: https://jsfiddle.net/t52mwLoc/
<div class="col-md-6"> <div class="card"> <div class="card-body"> <h4 class="card-title">Default Tab</h4> <!-- Nav tabs --> <ul class="nav nav-tabs" role="tablist"> <li class="nav-item"> <a class="nav-link active show" data-toggle="tab" href="#tab1" role="tab" aria-selected="true">TAB1</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#tab2" role="tab" aria-selected="false"> TAB2</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#tab3" role="tab" aria-selected="false"><span class="hidden-sm-up"> TAB3</a> </li> </ul> <!-- Tabs --> <div class="tab-content tabcontent-border"> <div class="tab-pane active show" id="tab1" role="tabpanel"> <div class="p-20"> Load this content... [TAB1] </div> </div> <div class="tab-pane p-20" id="tab2" role="tabpanel">some PHP... Load this ONLY after clicking [TAB2]</div> <div class="tab-pane p-20" id="tab3" role="tabpanel">some PHP... Load this ONLY after clicking [TAB3]</div> </div> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>Algo simple que puedes hacer es esto. ejemplo en vivo aquí
<!DOCTYPE html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> function initialLoad(){ $('#loader').load("page1.php"); } </script> </head> <body onload="initialLoad()"> Click on buttons to load different pages <br/> <button style="margin-left: 20px" class="btn btn-primary" onclick="load(1)"> Page 1 </button> <button style="margin-left: 20px" class="btn btn-primary" onclick="load(2)"> Page 2 </button> <button style="margin-left: 20px" class="btn btn-primary" onclick="load(3)"> Page 3 </button> <button style="margin-left: 20px" class="btn btn-primary" onclick="load(4)"> Page 4 </button> <button style="margin-left: 20px" class="btn btn-primary" onclick="load(5)"> Page 5 </button><br/><br/> <div class="load" id="loader"> </div> <h3>You can check the network tab to see which page is getting loaded</h3> <script> function load(page){ var thePage = "page"+page+".php" $('#loader').load(thePage);//assuming u have page1.php page2.php like this } </script> </body> </html>Para cualquier consulta comenta abajo.