Quand utiliser la fenêtre".onload"?
en JavaScript, quand je veux lancer un script une fois que la page est chargée, dois-je utiliser window.onload ou tout simplement écrire le script?
par exemple, si je veux avoir une pop-up, dois-je écrire (directement à l'intérieur de l'étiquette <script> ):
alert("hello!");
ou:
window.onload = function() {
alert("hello!");
}
les deux semblent tourner juste après le chargement de la page. Quelle est la différence?
6 réponses
Le premier exécute uniquement lorsque le navigateur obtient.
le second attend que la fenêtre soit chargée avant de l'exécuter.
en général, vous devriez faire le second, mais vous devriez attacher un écouteur d'événement à elle au lieu de définir la fonction. Par exemple:
window.addEventListener('load',
function() {
alert('hello!');
}, false);
les autres réponses semblent toutes périmées
D'abord, mettre les scripts en haut et utiliser window.onload est un anti-pattern. Il est laissé de jours D'IE au mieux ou de la mauvaise compréhension de JavaScript et le navigateur au pire.
Vous pouvez simplement déplacer vos scripts le 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 ont cru à tort que les scripts devaient entrer la section head . Parce que les choses sont exécutées dans l'ordre si votre script était dans la section head alors le corps et votre contenu n'existaient pas encore par définition de exécuter dans l'ordre .
la solution de contournement était d'utiliser window.onload pour attendre que le reste de la page se charge. Déplacer votre script vers le bas a également résolu ce problème et maintenant il n'est pas nécessaire d'utiliser window.onload puisque votre corps et votre contenu auront déjà été chargés.
la solution la plus moderne est d'utiliser la balise defer sur vos scripts mais d'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 va commencer à télécharger les scripts immédiatement et il va les exécuter dans l'ordre spécifié mais il attendra de les exécuter jusqu'à ce que la page a chargé, pas besoin de window.onload ou le meilleur mais encore inutile window.addEventListener('load', ...
Voici la documentation sur MDN .
selon elle:
l'événement de chargement se déclenche à la fin du processus de chargement des documents. À ce stade, tous les objets du document sont dans le DOM, et toutes les images et sous-images ont fini de se charger.
votre premier fragment de code s'exécute dès que le navigateur a cliqué sur cet endroit en HTML.
le le deuxième fragment déclenche popup lorsque le DOM et toutes les images sont chargés (voir les spécifications).
si l'on considère la fonction alert() , peu importe à quel point elle s'exécute (elle ne dépend pas de quoi que ce soit d'autre que l'objet window ). Mais si vous voulez manipuler le DOM - vous devriez certainement attendre pour charger correctement.
cela dépend si vous souhaitez exécuter lorsque l'élément de script rencontré, ou si vous le souhaitez exécuter lorsque l'événement load de feux (ce qui est après l'ensemble du document (y compris les images) a été chargé).
ni l'un ni l'autre N'est toujours juste.
en général, cependant, j'éviterais d'attribuer des fonctions directement à onload en faveur de l'utilisation addEventListener (avec des bibliothèques de compatibilité si j'avais besoin de prendre en charge les anciens navigateur.)
la raison d'attendre que le DOM soit chargé est que vous pouvez cibler tous les éléments qui se chargent après votre script. Si vous créez juste un alert , ça n'a pas d'importance. Disons, cependant, que vous cibliez un div qui était dans votre markup après votre script, vous obtiendriez une erreur si vous n'attendiez pas ce morceau de L'arbre DOM pour le charger.
document.ready est une excellente alternative à window.onload si vous utilisez jQuery.
voir ici: fenêtre.onload vs $(document).ready()
vous avez trois alternatives:
-
directement à l'intérieur de la balise script l'exécute dès qu'il est parsé.
-
Inside
document.addEventListener( "DOMContentLoaded", function(){});sera lancé une fois le DOM est prêt. -
Inside
window.onload function(){})s'exécute dès que toutes les ressources de la page sont chargées.