Exécution Javascript sur le chargement d’une page

06 mai 2009 | Développement, Web 2.0 | Tags: , ,

Comment exécuter plusieurs scripts Javascript au chargement d’une page ? C’est le problème auquel je me suis retrouvé confronté il y a quelques jours pour un développement personnel. Voici donc la solution que je vais vous présenter. Ce n’est peut-être pas la meilleure, mais elle a le mérite de fonctionner sous Internet Explorer et Mozilla Firefox.

Problème

Supposons que dans nous devons exécuter deux fonctions script1 et script2 au chargement de la page.

Surcharge de l’attribut onLoad de la balise body

La première solution à bannir est l’utilisation de l’attribut onLoad de la balise body, comme le montre l’exemple ci-dessous :

<body onload="script1();script2();">

Cette solution impose en effet de connaitre dès le début du rendu de la page l’ensemble des scripts qui devront être exécutés. Par conséquent, cette solution n’est pas viable. Cette solution est d’autant moins envisageable si vous optez pour un design à base de template, où le header (comportant la balise body) se retrouvera dans un fichier séparé du reste de la page.

Ajout d’événement sur le chargement de la page

La deuxième solution qui ne fonctionne pas de la même façon selon les navigateur Internet où elle s’exécute consiste à ajouter des événements Javascript sur le chargement de la page au fur et à mesure de son rendu au navigateur, car tous n’auront pas le même comportement vis-à-vis du code ci-dessous.

window.onload=script1();
[...]
window.onload=script2();

Le problème de cette solution est que l’appel de la fonction script2() remplacera celui de la script1(). On aura donc au final une exécution de script2() uniquement.

Une solution (celle pour laquelle j’ai opté)

Partant de ces constats, je passe désormais par une fonction Javascript intermédiaire qui s’occupe de gérer les événements attachés au chargement de la page. Elle s’occupe d’empiler les événements qui seront déclenchés au chargement de la page. Cette fonction est stockée dans un fichier .js référencé depuis la balise head de la page.

function addLoadEvent(func) {
   var oldonload = window.onload;
   if (typeof window.onload != 'function') {
      window.onload = func;
   } else {
      window.onload = function() {
         if (oldonload) {
            oldonload();
         }
         func();
      }
   }
}

Du coup, pour ajouter un événement au chargement de la page, il suffit d’appeler la fonction de la façon suivante :

addLoadEvent(script1);
[...]
addLoadEvent(script2);

Ce code vous permettra donc de lancer l’exécution de plusieurs fonctions Javascript directement après le chargement de la page. Je ne l’ai pas testé sur les navigateurs Google Chrome, Safari ou Opera, mais il marche sous Internet Explorer 7 et Mozilla Firefox 3, ce qui garantit déjà une bonne compatibilité avec les navigateurs actuels.

Source

Je vous laisse également le lien initial où j’ai trouvé cette fonction javascript et les exemples d’utilisation (en anglais par contre) : lien article original (en anglais).

En savoir plus :

  1. Popups modales Javascript : le fer de lance du web2.0
  2. Bonnes pratiques jQuery
  3. Extensions Firefox pour vos développements web 2.0

Partagez l'article
"Exécution Javascript sur le chargement d’une page" avec shortin.com

3 réponses au sujet “Exécution Javascript sur le chargement d’une page”

  • 1 Alexandre LM   a écrit :
    le 11 mai 2009 à 17:12 :

    Salut Loïc,

    Ce script est sympa! En fait, il permet de surcharger la méthode ‘onload’ des pages ayant déjà leurs propres scripts à jouer au chargement. Autrement dit, il est utile pour des pages utilisant le même body, mais traitant le corps de façon différente.

    Pour le paragraphe 2, tu dis :
    « Cette solution impose en effet de connaitre dès le début du rendu de la page l’ensemble des scripts qui devront être exécutés. »
    Je ne comprends pas bien. Peux-tu expliquer ?
    - Si c’est un problème de jouer les scripts selon certaines conditions, il est possible de mettre une condition dans le ‘onload’ (<body onload= »if (true) script1()…)
    - Si tu parles des data chargées sur lesquelles tu veux intervenir via ton script, le ‘onload’ d’une balise n’est exécuté qu’après chargement de cette dernière, il n’y a donc pas de problème.

    Peux-tu stp nous décrire via un exemple le problème que tu as rencontré, et en quoi l’ajout de la fonction dans le ‘onload’ du body fut un problème (même si je te l’accorde, c’est assez ‘crade’ si tu as utilisé un template) ?
    Merci.

    Note : t’es bête, 1 et 3, bah ça fait 4 ! Faut tout te dire. Bon, je te mets quand même la réponse pour ta gouverne. Mais t’oublies pas hein, je ne le mettrai pas à chaque fois ^^

    Alexandre LM

  • 2 Alexandre LM   a écrit :
    le 11 mai 2009 à 17:15 :

    Perturbant les majuscules qui sautent …

  • 3 Loïc   a écrit :
    le 14 mai 2009 à 13:49 :

    Les problèmes de l’ajout de code sur l’attribut onload de la balise body sont les suivants :
    - dans certains modèles de templates (par exemple ceux de WordPress), ta balise body est générée dans le fichier header.php (commun à toutes tes pages), donc si tu le modifies, cela implique d’avoir un traitement commun pour toutes les pages qui utilisent ce header.
    - si tu utilises un système sans template où le code et la présentation sont mélangées, tu dois au moment où tu génères ta balise body connaitre a priori toutes les fonctions Javascript que tu devras appeler dans la suite de ta page.

    PS : pour les majuscules qui sont enlevées, cela vient du thème CSS.
    PPS : 1 et 3 ça fait quatre… bien joué, mais des fois, c’est plus compliqué genre 5 et 8 ?

Ecrire un commentaire