Jquery, soyez prêt

L’article de ce jour sera une explication rapide d’une petite subtilité que le fameux framework Javascript Jquery propose pour charger des scripts. En effet Jquery propose 2 façons pour exécuter des instructions au loading de la page, le « document ready » et le « window load ».

Le « document ready » dans Jquery

C’est la fonction la plus connue et la plus utilisé des 2 fonctions que nous allons voir.

La fonction « document ready » dans Jquery permet de lancer des instructions lorsque le DOM (Document Object Model) à fini de se charger. Concrètement qu’est ce que ça veut dire ? Cela signifie que Jquery va attendre que toutes les balises HTML aient été chargées dans le document (la page web) pour exécuter les instructions à l’intérieur de cette fonction (attacher des évènements, lancer des actions qui ont besoins que ces balises soient présentes).

$(document).ready(function() {
// les instructions à executer quant le DOM est prêt.
alert("document is ready");
});

Le « window load » de Jquery

Cette fonction moins utilisé et moins connu sert à éxécuter des instructions lorsque tous les objets de la page ont fini de charger. Concrètement qu’est ce ça veut dire ? Jquery va attendre que tous les scripts / images / objets flash / Video … soit charger dans la page pour exécuter les instructions présentes dans cette fonction.

Utiliser cette fonction peut-être interessant dans certains cas précis. Je vais donner un exemple sur lequel j’ai travaillé et qui m’a d’ailleurs permis de connaître l’existence de cette fonction « window load ».

L’exemple avec window load

J’ai eu à faire un système d’aide pour une application que je développe à ma job. Ce système d’aide est composé de vignette qui présente chaque fonctionnalité du dashboard. Pour afficher la première vignette, il me fallait attendre que tous les éléments soient chargés. Cette fonction à donc fait le travail à merveille.

$(window).load(function() {
// les instructions à executer quand les frames, objects and images ... sont chargés.
alert("window is loaded");
});

Conclusion

La différence entre ces 2 fonctions est donc une question de timing mais la finalité est la même : charger les instructions à éxécuter au chargement de la page. Je connais depuis peu window load et je dois dire qu’elle m,a été utile uniquement pour un projet et que je dirais qu’elle est à utiliser avec prudence.