jquery Article

Jquery – évenement redimension du navigateur

J’ai récemment eu un problème à gérer en Jquery. Je voulais pouvoir redimensionner une fenêtre et récupérer la largeur de la fenêtre (après redimension). Pour éviter le lag du calcul à chaque « mini » redimension, la solution est d’agir une fois que l’on a fini de redimensionner la fenêtre. Voici comment faire : 

Créer un nouvel évènement jQuery (à utiliser comme une fonction) : 

$(window).resize(function() {
    if(this.resizeTO) clearTimeout(this.resizeTO);
    this.resizeTO = setTimeout(function() {
        $(this).trigger(‘resizeEnd’);
    }, 500);
});

Mettre ce code dans le document ready : 

$(window).bind(‘resizeEnd’, function() {
    var wdt = $(window).width();
    alert(wdt);
});

Voilà c’est assez simple mais ça peut servir dans certain cas un peu fucké comme je viens d’avoir ! J’espère que ça vous servira 🙂

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).

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.

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.