Pratique exemplaire pour l'utilisation de window.onload

La fenêtre.les événements onload sont annulés sur plusieurs créations. Pour ajouter des fonctions utilisez le fenêtre.addEventListener(standard W3C) ou 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);
}

les cadres javascript modernes ont introduit l'idée d'un événement "prêt au document". Il s'agit d'un événement qui se déclenchera lorsque le document sera prêt à subir des manipulations DOM. L'événement "onload" ne se déclenche qu'après que tout le contenu de la page a été chargé.

avec l'événement" document ready", les cadres ont fourni un moyen de mettre en file d'attente plusieurs bits de code Javascript et des fonctions à exécuter lorsque l'événement déclenche.

Donc, si vous êtes opposés à Cadres, la meilleure façon de procéder est de mettre en œuvre votre propre document.onload de la file d'attente.

si vous n'êtes pas opposé à frameworks, alors vous voudrez regarder dans jQuery et document.prêt,Prototype et dom:loaded, Dojo et addOnLoad ou Google pour [votre framework] et"document ready",.

si vous n'avez pas choisi de cadre mais que vous êtes intéressé, jQuery est un bon point de départ. Cela ne change rien au noyau de Javascript fonctionnalité, et restera généralement hors de votre chemin et vous permettra de faire les choses comme vous le souhaitez lorsque vous le souhaitez.

Joomla est livré avec MooTools, donc vous trouverez plus facile d'utiliser la bibliothèque MooTools pour votre code supplémentaire. MooTools est livré avec un événement personnalisé appelé domready qui démarre lorsque la page est chargée et que l'arborescence des documents est analysée.

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

Plus d'informations sur MooTools peuvent être trouvées ici. Joomla 1.5 actuellement navires avec MT1.1 tandis que la Joomla 1.6 alpha inclura MT1.2

Personnellement, je préfère cette méthode. Non seulement il vous permet d'avoir plusieurs onload fonctions, mais si certains script a défini avant vous avez obtenu, cette méthode est assez agréable à manipuler... Le seul problème est qu'une page charge plusieurs scripts qui n'utilisent pas le window.addLoad() function; mais c'est leur problème :).

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

C'est le chemin sale mais plus court :P

function load(){
   *code*
}

window[ addEventListener ? 'addEventListener' : 'attachEvent' ]
( addEventListener ? 'load' : 'onload', function(){} )

à partir de je toujours inclure jQuery / bootstrap fichiers JS sur le bas du document et n'ont pas d'accès à $ sur le document, j'ai développé un petit plugin" init " qui est un seul et unique script JS que j'ai inclus en haut de mes pages:

window.init = new function() {
    var list = [];

    this.push = function(callback) {
        if (typeof window.jQuery !== "undefined") {
            callback();
        } else {
            list.push(callback);
        }
    };

    this.run = function() {

        if (typeof window.jQuery !== "undefined") {
            for(var i in list) {
                try {
                    list[i]();
                } catch (ex) {
                    console.error(ex);
                }
            }
            list = [];
        }
    };

    if (window.addEventListener) {
        window.addEventListener("load", this.run, false);
    } else if (window.attachEvent) {
        window.attachEvent("onload", this.run);
    } else {
        if (window.onload && window.onload !== this.run) {
            this.push(window.onload);
        }
        window.onload = this.run;
    }
};

en utilisant ceci je peux définir n'importe quel chargeur anonyme sur la page, avant l'inclusion de jQuery et bootstrap et rester sûr qu'il va tirer une fois que jQuery est présent:

init.push(function() {

    $('[name="date"]').datepicker({
        endDate: '0d',
        format: 'yyyy-mm-dd',
        autoclose: true
    }).on('hide', function() {
        // $.ajax
    });

    $('[name="keyword_id"]').select2();
});