Javascript en pied de page et JQuery

Javascript en pied de page et JQuery

Vous ne le savez peut être pas tous, mais aujourd’hui, les ressources javascript doivent être placé en pied de page et non dans l’entête.

Pourquoi : Optimiser le chargement de la page, ces ressources sont synchrone, donc tant qu’un fichier n’est pas téléchargé le reste de la page non plus.

Petit rappel, dans WordPress il faut utiliser les fonctions :

Une fonction pour enregistrer le script/style avec ses paramètres et l’autre pour l’appeler dans les bonnes pages.

Exemple :

wp_register_script( 'ctw-monscript', JS.'/mctw-monscript'.MINI.'.js', array('jquery'), '', true );
Appel de script dans WordPress

Tous cela pour parler du JQuery..
Il est souvent appeler par défaut dans pas mal de thème WordPress et souvent en entête (Bouhouhou…). Dans ces cas là je ne le change pas car il faudrait reprendre tous les script pour vérifier que tous fonctionne correctement avec un Jquery en bas de page.
D’ailleurs comment fait-on quand le JQuery est déjà appelé.
Soit on modifie sont thème avec true à la fin de la fonction wp_register_script.
Soit on utilise un thème enfant et là il faut surcharger l’appel en désinscrivant la ressources puis en la remettant :

if( !is_admin()){
	wp_deregister_script('jquery');
	wp_register_script('jquery', includes_url( '/js/jquery/jquery.js' ), false, null, true);
	wp_enqueue_script('jquery');
}
JQuery en pied de page

Pour ma part cela m’arrive souvent de mettre des scripts en pleine page car je n’ai pas besoin de faire un long script a charger en fin de page.
Le soucis est que la plupart du temps ces scripts utilisent la bibliothèque JQuery.
Si cette bibliothèque n’existe pas au moment ou le script est présent :

BOUM, ca pète !

En fait, la solution est de remplacer l’appel classique "ready" en JQuery,

Appel normal JQuery :

jQuery(document).ready(function() {
	/* moncodeJS */
	mafonctionJS();
});
ready

Par un Listener,
Solution : Appel du script au coeur de la page si JQuery est en bas de page

window.addEventListener('load', function () {
	/* moncodeJS */
	mafonctionJS();
}, false);
addEventListener

EDIT du 27/10/2016 : Ajout de la fonction includes_url() pour que le lien fonctionne sur toutes les installations WordPress.


Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *