Au début appendChild enfer dans les 3 premiers navigateurs

Question

J'essaye de charger des javascripts paresseux, mais je n'arrive pas à le faire fonctionner de manière fiable. Mes pages se chargent assez rapidement et je veux le garder ainsi, donc je ne suis pas sur le point d'utiliser un timeout pour retarder le chargement. En plus de document.readyState, comment puis-je m'assurer que le DOM est vraiment prêt à être modifié?

Méthode I:

1. sondage readyState

2. script createElement

3. src = url

4. AppendElement à la tête

Résultats:

IE8: avorte toujours

FF3: charges première fois, avorte tous les autres

Chrome: charges première fois, avorte chaque autre

Méthode II: (lazyload inclus dans tag publicitaire)

1. de charge avec lazyload

Résultats:

IE8: toujours arrête prématurément

FF3: fonctionne

Chrome: charges première fois, avorte tous les autres

Answer 1

Javascript est multi-navigateurs difficilement utilisable sans un cadre décent pour vous aider à couvrir la différence. Probablement le plus populaire aujourd'hui est jquery, où, par this tutorial, vous pouvez utiliser $(document).ready(). En dojo, également très populaire, vous pouvez utiliser addOnLoad. Et ainsi de suite ... et si vous n'utilisez aucun framework, vous rendez la vie trop dure pour vous: faites-vous plaisir et choisissez un framework JS qui vous plait! -)

Answer 2

Si vous mettez votre tag <script> juste au-dessus de la balise </body>, vous pouvez faire la plupart des choses avec DOM sans que cela ne provoque d'erreurs, c'est-à-dire que tout ce qui est au-dessus de la balise <script> est habituellement disponible pour modification.

Cependant, si vous êtes à la recherche d'une solution plus robuste, vous pourriez avoir des progrès en vérifiant comment les grandes bibliothèques sont détecter si le DOM est prêt, voici un pour les débutants (jQuery): http://github.com/jquery/jquery/blob/master/src/core.js#L393