Accueil    HTML    Evenement onload
 



Evenement onload  HTML Evenement onload : fin de chargement d'un élément

«  Partie précédente  |  Index  |  Partie suivante  »


L'évènement onload est déclenché au moment ou l'élément auquel il fait référence est chargé. Il peut s'appliquer aux balises suivantes : <body>, <img>, <input> de type image, <link>, <script>, <style> ainsi qu'aux balises <iframe>, <frameset>, <frame>.
Cependant le cas le plus courant d'utilisation de cet évènement est son l'application sur la balise <body> du document html. Il se déclenchera alors une fois que tous les éléments de la page auront été chargés.

L'évènement "onunload" se déclenche lorsque l'utilisateur quitte la page courante, ce qui permet de réaliser une gestion spécifique à ce moment.


Exemple d'utilisation pour l'évènement onload :





Temps de chargement de la page en se basant sur l'évènement onload :

Dans la partie head de la page, on déclare le script suivant qui permet de d'initialiser le moment de début de chargement de la page et de déclarer la fonction "CalculTempsChargement" qui sera appelée sur l'évènement onload du tag <body>.

<script type="text/javascript">
   TpsDebut = (new Date()).getTime();
   
   function CalculTempsChargement()
   {
      TpsFin = (new Date()).getTime();
      TpsDuree = (TpsFin - TpsDebut) / 1000;
      document.getElementById("divChargement").innerHTML = "Page chargée en "
         + TpsDuree + " secondes";
   }
</script>

On déclare l'évènement onload sur la balise body et on crée l'élément qui affichera le résiultat :

<body onload="CalculTempsChargement();">
   ...
   <div id="divChargement" style="border:solid 1px silver; padding:5px;"></div>



Temps de chargement de la page en se basant sur l'évènement onload :