Caricare i js esternamente per testare i plugin

Cercando nuovi plugin e volendo testare il loro funzionamento, mi sono trovato di fronte al problema di dover caricare tutti i plugin nel HEAD della pagina per poter usufruire delle loro funzioni.

Volendo evitare questo ammassamento di plugin nella memoria di TXP, sono andato alla ricerca delle funzioni che mi permettono di caricare al volo il plugin esattamente quando serve.

Le possibili scelte

Abbiamo due possibilità per pote caricare agevolmente un file esterno;
la prima sfrutta l’uso di $.ajax ed è organizzata secondo l’esempio qui sotto:_

$.ajax({
  type: "GET",
  url: "path of the file",
  dataType: "script",
  success: function(){//call the function here....}
});

In alternativa esiste possiamo sfruttare il comando $.getScript che lavora allo stesso modo ma gestendo il codice più facilmente (almeno per me):

$.getScript('path of the file', function(){
 //call the function here....
});

Facciamo la prova

Possiamo vedere adesso l’uso di questo nuovo comando mentre si occupa di caricare il plugin cycle e lo vediamo all’opera.

<div class="pics">
<img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg"
 width="200" height="200" />
<img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg"
 width="200" height="200" />
<img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg"
 width="200" height="200" />
</div>

$.getScript('http://malsup.github.com/jquery.cycle.lite.js', function(){
$('div.pics').cycle();
});

div.pics{ height: 232px; width: 232px; padding:0; margin:0; overflow: hidden }
div.pics img { height: 200px; width: 200px; padding: 15px; border: 1px solid #ccc;
 background-color: #eee; top:0; left:0 }
div.pics img {-moz-border-radius: 10px; -webkit-border-radius: 10px;}