web-dev-qa-db-fra.com

Quand utiliser "window.onload"?

En JavaScript, lorsque je souhaite exécuter un script une fois la page chargée, dois-je utiliser window.onload ou simplement écrire le script?

Par exemple, si je veux avoir un pop-up, dois-je écrire (directement à l'intérieur du <script> tag):

alert("hello!");

Ou:

window.onload = function() {
    alert("hello!");
}

Les deux semblent s'exécuter juste après le chargement de la page. Quelle est la différence?

javascriptonloadonload-event
28
Jonathan Lam

window.onload s'exécute uniquement lorsque le navigateur y accède.

window.addEventListener attend le chargement de la fenêtre avant de l'exécuter.

En général, vous devez faire la seconde, mais vous devez y attacher un écouteur d'événements au lieu de définir la fonction. Par exemple:

window.addEventListener('load', 
  function() { 
    alert('hello!');
  }, false);
32
Crayon Violent

Les autres réponses semblent toutes obsolètes

Tout d'abord, mettez les scripts en haut et utilisez window.onload est un anti-motif. Il reste de IE jours au mieux ou une mauvaise compréhension de JavaScript et du navigateur au pire.

Vous pouvez simplement déplacer vos scripts au bas de votre html

<html>
  <head>
   <title>My Page</title>
  </head> 
  <body>
    content
  </body>
  <script src="some-external.js"></script>
  <script>
    some in page code
  </script>
</html>

La seule raison pour laquelle les gens ont utilisé window.onload est parce qu'ils croyaient à tort que les scripts devaient aller dans la section head. Parce que les choses sont exécutées dans l'ordre si votre script était dans la section head, le corps et votre contenu n'existaient pas encore par définition de exécuter dans l'ordre.

La solution de contournement hacky consistait à utiliser window.onload pour attendre le chargement du reste de la page. Le déplacement de votre script vers le bas a également résolu ce problème et il n'est plus nécessaire d'utiliser window.onload puisque votre corps et votre contenu auront déjà été chargés.

La solution la plus moderne consiste à utiliser la balise defer sur vos scripts mais à utiliser que vos scripts doivent tous être externes.

<head>
  <script src="some-external.js" defer></script>
  <script src="some-other-external.js" defer></script>
</head>

Cela a l'avantage que le navigateur commencera à télécharger les scripts immédiatement et qu'il les exécutera dans l'ordre spécifié, mais il attendra de les exécuter jusqu'à ce que la page soit chargée, pas besoin de window.onload ou mieux mais toujours inutile window.addEventListener('load', ...

17
gman

Voici la documentation sur MDN .

Selon elle:

L'événement de chargement se déclenche à la fin du processus de chargement du document. À ce stade, tous les objets du document se trouvent dans le DOM et toutes les images et sous-cadres ont fini de se charger.

Votre premier extrait de code s'exécutera dès que le navigateur aura atteint ce point en HTML.

Le deuxième extrait déclenchera une fenêtre contextuelle lorsque le DOM et toutes les images seront entièrement chargés (voir les spécifications).

Compte tenu de la fonction alert(), peu importe à quel moment elle s'exécutera (elle ne dépend de rien d'autre que de l'objet window). Mais si vous voulez manipuler le DOM - vous devez absolument attendre qu'il se charge correctement.

5
Slava Fomin II

Cela dépend si vous souhaitez qu'il s'exécute lorsque l'élément de script est rencontré ou si vous souhaitez qu'il s'exécute lorsque l'événement de chargement se déclenche (c'est-à-dire après que le document entier (y compris des éléments tels que des images) a été chargé).

Ni l'un ni l'autre n'a toujours raison.

En général, cependant, j'éviterais d'attribuer des fonctions directement à onload au lieu d'utiliser addEventListener (avec les bibliothèques de compatibilité si j'avais besoin de prendre en charge des navigateurs plus anciens).

1
Quentin

La raison pour laquelle le DOM doit être chargé est que vous pouvez cibler tous les éléments qui se chargent après votre script. Si vous créez simplement un alert, cela n'a pas d'importance. Disons, cependant, que vous visiez un div qui était dans votre balisage après votre script, vous obtiendrez une erreur si vous n'attendez pas que cette partie de l'arborescence DOM se charge.

document.ready est une excellente alternative à window.onload si vous utilisez jQuery.

Voir ici: window.onload vs $ (document) .ready ()

1
SeeMeCode

Vous avez trois alternatives:

  1. Directement à l'intérieur de la balise de script l'exécute dès qu'il est analysé.

  2. Inside document.addEventListener( "DOMContentLoaded", function(){}); l'exécutera une fois que le DOM sera prêt.

  3. Inside window.onload function(){}) s'exécutera dès que toutes les ressources de la page seront chargées.

0
Henrik