Initialisation des composants JS à la fin de HTML ou sur "onload"?

Question

Pendant un certain temps, j'avais lancé l'initialisation du composant JavaScript en attendant que l'événement "onload" se déclenche et en exécutant un main(). Il semblait plus propre et vous pouviez être sûr que l'état d'identification de votre DOM était en ordre. Mais après un certain temps de mise à l'épreuve, j'ai constaté que l'initialisation du composant était bloquée par toute sorte de ressource suspendue pendant le chargement (images, css, iframes, flash, etc.).

Maintenant, j'ai déplacé l'invocation d'initialisation à la fin du document HTML lui-même en utilisant l'exécution <script /> inline et trouvé qu'il pousse l'initialisation avant d'autres ressources externes.

Maintenant, je me demande s'il y a des pièges qui viennent avec ça au lieu d'attendre le "onload".

Quelle méthode utilisez-vous?

EDIT: Merci. Il semble que chaque bibliothèque a une fonction spécialisée pour les différences d'implémentation DOMContentLoaded/readyState. J'utilise un prototype donc this est ce dont j'avais besoin.

Answer 1

Pour moi, nous utilisons jquery, et son document état prêt veille à ce que les DOM est chargé, mais n'attend pas de ressources comme vous le dites. Vous pouvez bien sûr le faire sans framework javascript, cela nécessite une fonction que vous pouvez créer par exemple: document ready Maintenant, en mettant le script en fin de page, assurez-vous que le reste de la page est là, mais assurez-vous le DOM est prêt n'est jamais une mauvaise chose.

Answer 2

Jquery a $ (document) .ready()

Le point idéal auquel exécuter la plupart des scripts est lorsque le document est prêt, et pas nécessairement quand il est "chargé".

See here

Answer 3

J'utilise non plus. Au lieu de cela, je dépends de YUI's onDomReady() (ou onContentReady()/onAvailable()), car il gère la synchronisation de l'initialisation pour moi.

(Autres bibliothèques JS ont des méthodes similaires pour exécuter une seule fois la page est complètement chargée, car cela est un problème JS commun.)

Answer 4

Ceci n'est pas conforme aux spécifications (X) HTML et je serais déconseillé. Il mettrait votre site dans un mode bizarre du navigateur.

Answer 5

La bonne façon de contourner le problème serait d'utiliser l'événement DOMContentLoaded, qui n'est pas pris en charge dans tous les navigateurs. Hacks (par exemple interrogation doScroll() ou en utilisant onreadystatechange) existent, de sorte que les bibliothèques sont en mesure de fournir cette fonctionnalité à travers les navigateurs.

Mais il y a encore des problèmes avec DOMContentLoaded et des transferts groupés qui n'ont pas été résolus par les frameworks JavaScript populaires.

Voici my take on the issue.