Query Loader est une extension jQuery vous permettant de mettre en place, avec style, un système de pré-chargement sur blog. Disponible au téléchargement, il vous suffit de décompresser l’archive et de l’envoyer dans le dossier de votre installation WordPress

Télécharger l’extension jQuery “QueryLoader” !

Cette extension est très facile à installer sur un blog WordPress. Vous pouvez bien entendu personnaliser la feuille de style donnée dans l’archive de Query Loader, pour ainsi obtenir une meilleure intégration avec votre charte graphique de votre blog. Un exemple d’utilisation est disponible sur cette page de démonstration.

Installation

Pour exécuter et installer cette extension jQuery, il vous suffit de télécharger l’archive “QueryLoader”, de la décompresser ensuite et d’envoyer les fichiers là où vous souhaitez, dans le dossier de votre installation WordPress, ou sur un serveur distant. Nous vous conseillons tout simplement de l’envoyer à la racine de votre blog. Nous allons utiliser le fichier “functions.php” de votre thème WordPress, pour plus de simplicité. Il vous suffit de coller le code suivant, en modifiant le possible chemin du dossier “Query Loader”.

add_action('wp_head', 'queryloader');

function queryloader() {
echo '
<script type="text/javascript"" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=1.4.2"></script>
<link rel="stylesheet" href="'.get_bloginfo('url').'/queryLoader/css/queryLoader.css" type="text/css" />
<script type="text/javascript" src="'.get_bloginfo('url').'/queryLoader/js/queryLoader.js"></script>
';
}

Par la suite, il vous suffit d’éditer le contenu de votre fichier “index.php” et d’insérer le code suivant avant le contenu général de votre blog.

<script type='text/javascript'>
    QueryLoader.init();
</script>

Pour optimiser et sélectionner le chargement d’un seul élément, il vous suffit d’attribuer la valeur “selectorPreload” au code donné précédemment. Ce qui nous donne alors le code suivant. L’élément “#exemple” correspond à l’identifiant du module sélectionné pour le pré-chargement.

<script type='text/javascript'>
    QueryLoader.selectorPreload = "#exemple";
    QueryLoader.init();
</script>