jliyn: Just Load If You Need, un metodo jQuery

Troppi contenuti possono rallentare i tempi di caricamento della pagina, perché non caricare solo ciò che si vede effettivamente? Con jQuery bastano poche righe di codice.
jliyn: Just Load If You Need, un metodo jQuery

Specifiche sulla traduzione

Di seguito la traduzione dell’articolo “jliyn: Just Load If You Need, a jQuery method” tradotto e parzialmente adattato da: Alfredo Cosco.

jliyn

Troppi contenuti possono rallentare i tempi di caricamento della pagina, perché non caricare solo ciò che si vede effettivamente? Con jQuery bastano poche righe di codice.

Scenario

Immaginiamo di avere una pagina con diversi TAB, almeno 3, con differenti sezioni come:

  • un lungo testo,
  • una galleria di immagini,
  • una galleria di video.

Se il browser deve interpretare tutto il contenuto e scaricarlo in cache (come ad esempio avviene per le fotografie) il rendering della pagina può rallentare.
Ma perché passare tutti contenuti allo stesso tempo? Con jQuery si può trovare un metodo per caricare parti di codice solo se necessario:

Just Load If You Need

Il codice HTML

Questo è lo snippet di una pagina composta con dei tab e fatta con twitter bootstrap:

<ul class="nav nav-tabs" id="myTab">
<li class="active"><a class="lorem" data-toggle="tab" href="#lorem">Lorem</a></li>
<li><a class="pics" data-toggle="tab" href="#pics">Pics</a></li>
<li><a class="videos" data-toggle="tab" href="#videos">Videos</a></li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade in active" id="lorem">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vitae porttitor sem. Proin vitae gravida lorem. Cras viverra tempus ipsum, lacinia pretium turpis suscipit eget. Phasellus dignissim interdum mauris, et dapibus risus viverra ut. Praesent a risus metus. Sed enim orci, commodo vitae pulvinar eget, varius eu ligula. Donec diam felis, porta a convallis vitae, ornare congue arcu. Cras ut neque a metus hendrerit porta nec ut nibh. Vivamus commodo, nunc vitae faucibus euismod, quam ante scelerisque enim, ac ultrices ante tellus vel ante. Morbi vel nibh a nulla ultrices vehicula vitae at felis. Maecenas sit amet libero sit amet mauris consequat imperdiet.
  ...
  Duis aliquam adipiscing metus nec tempor. Nam cursus elit at erat ullamcorper rutrum. Suspendisse iaculis commodo enim ut pulvinar.
  </div>
<div class="tab-pane fade" id="pics">
<img src="img/01.jpg">
  <img src="img/02.jpg">
  <img src="img/03.jpg">
 </div>
<div class="tab-pane fade" id="videos">
<iframe allowfullscreen="" frameborder="0" height="315" src="http://www.youtube.com/embed/pl3vxEudif8" width="420"></iframe>
<iframe allowfullscreen="" frameborder="0" height="315" src="http://www.youtube.com/embed/g6i3JTF8-tA" width="420"></iframe>
 </div>
</div>
<!-- end of my tab content-->

Per prima cosa occorre spostare il contenuto dei DIV con classe tab-pane in un file HTML, che avrà come nome l’ID del DIV stesso, in questo caso:

  • lorem.html
  • pics.html
  • videos.html

Files

Quindi ora il codice della pagina apparirà così:

<ul id="myTab" class="nav nav-tabs">
  <li class="active"><a href="#lorem" class="lorem" data-toggle="tab">Lorem</a></li>
  <li><a href="#pics" class="pics" data-toggle="tab">Pics</a></li>
  <li><a href="#videos" class="videos" data-toggle="tab">Videos</a></li>
</ul>
<div id="myTabContent" class="tab-content">
  <div class="tab-pane fade in active" id="lorem"></div>
  <div class="tab-pane fade" id="pics"></div>
  <div class="tab-pane fade" id="videos"></div>
</div>

Il codice Javascript

Attenzione, la classe del link nel menù è collegata all’ID del DIV, ora andremo ad agganciare agli ID anche la relativa pagina HTML che verrà caricata solo quando qualcuno cliccherà sul TAB; bastano 6 righe di codice in jQuery:

$('#myTab a').click(function (e) {
 e.preventDefault();
 var key=$(this).attr('class');
 $('#'+key).load(key+'.html');
});
$('div > .active').load($('div > .active').attr('id')+'.html');

Conclusioni

Caricando i contenuti “on demand” i tempi di rendering si riducono significativamente e si ottiene un discreto risparmio di banda come si può vedere dallo screenshot:

jliyn in action

Tools

Demo

Pagina non jliyn Pagina jliyn

Download

Consulta il codice

Fonti

Search
Tags
Seleziona rubrica
Seleziona rubrica
Codice Github