jQuery può essere inclusa in vari modi nelle nostre pagine. In questo articolo vedremo i diversi modi di includere jQuery e il corretto ordine da seguire affinchè la libreria funzioni al meglio.
Posizione nella pagina
jQuery può essere inclusa sia nell'elemento head che prima della chiusura dell'elemento body. La seconda soluzione è da preferirsi in quanto aumenta di molto la performance delle nostre pagine.
Infatti i browser non aspettano il caricamento di jQuery prima di visualizzare la pagina poichè in questo caso jQuery è già inclusa nel corpo della pagina. Esempio:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</body>
</html>
Caricamento locale e remoto
jQuery può essere sia scaricata dal sito ufficiale e quindi inclusa localmente nelle nostre pagine sia caricata da remoto (come nell'esempio precedente).
Il caricamento remoto ha tra i suoi vantaggi il fatto che la copia di jQuery è già compressa e ottimizzata. Inoltre il download remoto avviene tramite un sistema CDN che permette di ridurre al minimo la latenza.
Tra gli svantaggi c'è il fatto che se ci sono problemi con il download remoto il nostro sito potrebbe essere penalizzato in termini di caricamento. Per questo gli sviluppatori adottano spesso la copia locale come valore di ripiego nel caso in cui quella remota non sia disponibile:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
if(!window.jQuery && document.write('<script type="text/javascript" src="assets/js/jquery.min.js"></script>'))
</script>
</body>
</html>
Se si usa Google per caricare jQuery, l'URL di base è sempre http://ajax.googleapis.com/ajax/libs/jquery/. Quest'URL può essere seguito dal numero di versione di jQuery. Il numero 1 indica sempre l'ultima sottoversione disponibile per quel numero. Se invece avessimo specificato 1.6, avremmo caricato invece l'ultima sottoversione disponibile della versione 1.6.
Ovviamente è possibile caricare direttamente una sottoversione specificandola ad esempio come 1.7.1.
Caricamento in WordPress
jQuery è già disponibile in WordPress. Dobbiamo solo caricarla nel nostro tema utilizzando la funzione wp_enqueue_script() nel file functions.php o nei file del tema (header.php o footer.php):
if(!is_admin()) {
wp_enqueue_script('jquery');
}
Qualora volessimo usare una copia di jQuery diversa da quella di WordPress dobbiamo procedere in questo modo nel file functions.php:
if(!is_admin()) {
wp_deregister_script('jquery');
wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js', '1.0', true);
wp_enqueue_script('jquery');
}
In questo caso abbiamo sostituito nel nostro tema la copia locale con quella remota di Google.