jQuery getScript: caricare gli script nel momento in cui servono

Le moderne applicazioni web fanno ampio uso del Javascript e sempre più frequentemente caricare tutti gli script necessari rallenta di molto il caricamento completo della pagina. Il buon senso consiglia di caricare all’interno di ogni pagina solo gli script di cui effettivamente si ha bisogno ma l’avvento dei CMS non sempre rende semplice questa operazione.

Un’altra soluzione molto utile al problema consiste nell’utilizzare un metodo poco conosciuto ma molto molto importante di jQuery: $.getScript(). Questo metodo consente di caricare gli script all’interno della pagina solo nel momento in cui effettivamente se ne ha bisogno. Il concetto alla base è del tutto simile al LazyLoad delle immagini. Proviamo ad ipotizzare un esempio in cui effettivamente è utile il metodo. Supponiamo che all’interno delle pagine web ci sia un piccolo modulo di contatto (come nel footer di questo blog). Non si ha la garanzia che tale modulo verrà sempre utilizzato quindi tutto il codice utilizzato per i controlli di validità dei dati inseriti non necessita di essere caricato ad ogni pagina. In questo caso potremmo realizzare un handler che provvede al caricamento dello script per il controllo dei dati solo al verificarsi di un determinato evento come il submit della form o il focus su uno dei campi. Questo è solo un semplice esempio ma i suoi utilizzi sono davvero tantissimi.

jQuery.getScript()

Vediamo insieme come funziona lo script proprio ipotizzando l’esempio appena visto. Supponendo di avere una form con id #contact, per caricare lo script check_form.js al submit, avremo bisogno del seguente codice:

$('#contact').submit(function() {
$.getScript('check_form.js');
});

Come possiamo vedere, il metodo prende in ingresso il path dello script e, eventualmente, anche una funzione di callback se lo script è caricato con successo.

Un esempio all’opera

Vediamo ora insieme un esempio all’opera per comprendere meglio il suo funzionamento. A livello pratico non ha molta utilità ma è comunque un ottimo esercizio per prendere confidenza sia con jQuery che con il metodo.

Realizzeremo una semplice form contenente 5 checkbox corrispondenti a 5 script che caricheremo alla pressione del tasto submit solo se la checkbox corrispondente è stata selezionata.

Il codice Javascript necessario alla sua realizzazione è il seguente:

$(function(){

//al submit della form carico gli script selezionati
$('#load_scripts').submit(function(){

var $_dir = 'js/';
$('input[type=checkbox]').each(function(){
if( $(this).attr('checked') == true )
//carico lo script
$.getScript( $_dir + $(this).attr('id') + '.js' );
});

return false;
});
});

E’ possibile vedere all’opera l’esempio al seguente link:

Demo