Les meilleures pratiques pour l'utilisation de la fenêtre.onload

Question

Je développe des sites Joomla/composants/modules et plugins et j'ai besoin de la capacité à utiliser JavaScript qui déclenche un événement lorsque la page est chargée. La plupart du temps cela se fait à l'aide de l' window.onload fonction.

Ma question est:

1. Est-ce le meilleur moyen de déclencher des événements JavaScript sur le chargement de la page ou il y a un mieux/plus récentes de la sorte?
2. Si c'est le seul moyen de déclencher un événement sur chargement de la page, quelle est la meilleure façon de s'assurer que plusieurs événements peuvent être exécutés par les différents scripts?

Answer 1

window.onload = function(){}; fonctionne, mais comme vous l'avez peut-être remarqué, il vous permet de spécifier seulement 1 écouteur.

Je dirais que le mieux/plus récents façon de le faire serait d'utiliser un framework, ou tout simplement utiliser une simple mise en œuvre de la native addEventListener et attachEvent (pour IE) les méthodes, ce qui vous permet de retirer les écouteurs pour les événements.

Voici un cross-browser de mise en œuvre:

// Cross-browser implementation of element.addEventListener()
function listen(evnt, elem, func) {
    if (elem.addEventListener)  // W3C DOM
        elem.addEventListener(evnt,func,false);
    else if (elem.attachEvent) { // IE DOM
         var r = elem.attachEvent("on"+evnt, func);
         return r;
    }
    else window.alert('I\'m sorry Dave, I\'m afraid I can\'t do that.');
}

// Use: listen("event name", elem, func);

Pour la fenêtre.onload cas d'utilisation: listen("load", window, function() { });

---

EDIT j'aimerais élargir ma réponse en ajoutant des informations précieuses qui a été relevé par d'autres.

C'est à propos de l' DOMContentLoaded (Mozilla, Opera et webkit nightlies actuellement ce) et de l' onreadystatechange (pour IE) des événements qui peuvent être appliquées pour le document objet de comprendre que lorsque le document est disponible pour être manipulées (sans attendre que toutes les images/feuilles de style, etc.. pour être chargé).

Il y a beaucoup de "hacky" pour les implémentations de la croix-des navigateurs prennent en charge de cela, je vous suggère fortement d'utiliser un framework pour cette fonction.

Answer 2

Moderne frameworks javascript ont introduit l'idée d'un "document de prêt" de l'événement. C'est un événement qui va se déclencher lorsque le document est prêt pour les manipulations DOM effectuée sur elle. Le "onload" événement se déclenche qu'après TOUT, sur la page est chargée.

Avec le "document de prêt", les cadres ont fourni un moyen de faire la queue plusieurs bits de code Javascript et les fonctions à exécuter lorsque l'événement se déclenche.

Donc, si vous êtes opposés à des cadres, la meilleure façon d'aller à ce sujet est de mettre en place votre propre document.onload de la file d'attente.

Si vous n'êtes pas opposé à des cadres, alors vous aurez envie de regarder en jQuery et document.prêt, Prototype et dom:loaded, Dojo et addOnLoad ou Google pour [votre cadre] et le "document ready".

Si vous n'avez pas choisi un cadre, mais qui sont intéressés, jQuery est un bon endroit pour commencer. Il ne change pas tout de Javascript de base de la fonctionnalité, et sera généralement rester en dehors de votre chemin et de vous permettre de faire les choses comme vous le souhaitez quand vous le souhaitez.

Answer 3

De la fenêtre.onload événements sont remplacés sur plusieurs créations. Pour ajouter des fonctions utilisation de la de la fenêtre.la méthode addEventListener(norme W3C) ou de la fenêtre.attachEvent(pour IE). Utiliser le code suivant qui a fonctionné.

if (window.addEventListener) // W3C standard
{
  window.addEventListener('load', myFunction, false); // NB **not** 'onload'
} 
else if (window.attachEvent) // Microsoft
{
  window.attachEvent('onload', myFunction);
}

Answer 4

Joomla est livré avec MooTools, de sorte que vous trouverez qu'il est plus facile d'utiliser la bibliothèque MooTools pour votre code supplémentaire. MooTools est livré avec un événement personnalisé appelé domready qui se déclenche lorsque la page est chargée et l'arborescence du document est analysé.

window.addEvent( domready, function() { code to execute on load here } );

Plus d'informations sur MooTools peut être trouvé ici. Joomla 1.5 est actuellement livré avec MT1.1 lorsque l'Joomla 1.6 alpha comprendra MT1.2

Answer 5

Personnellement, je préfère cette méthode. Non seulement il vous permet d'avoir plusieurs onload fonctions, mais si certains script avait défini ci - avant que vous avez obtenu pour elle, cette méthode est assez agréable à manipuler que... Le seul problème de la gauche est si une page se charge plusieurs script qui n'utilise pas l' window.addLoad() fonction; mais c'est leur problème :).

P. S. il est également idéale si vous voulez "chaîne" en plus de fonctions plus tard.