Najlepsza praktyka korzystania z okna.onload

Okno.zdarzenia onload są nadpisywane na wielu utworach. Aby dodać funkcje Użyj okno.addEventListener (standard W3C) lub okno.attachEvent (dla IE). Użyj poniższego kodu, który zadziałał.

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

Nowoczesne frameworki javascript wprowadziły ideę zdarzenia "document ready". Jest to zdarzenie, które zostanie wywołane, gdy dokument będzie gotowy do przeprowadzenia na nim manipulacji DOM. Zdarzenie "onload" zostanie wywołane dopiero po załadowaniu wszystkiego na stronie.

Wraz ze zdarzeniem" document ready", frameworki umożliwiły kolejkowanie wielu bitów kodu Javascript i funkcji, które mają być uruchamiane podczas wywołania zdarzenia.

Więc jeśli jesteś przeciwny frameworkom, najlepiej sposobem na to jest wdrożenie własnego dokumentu.Kolejka.

Jeśli nie jesteś przeciwny frameworkom, powinieneś przyjrzeć się jQuery i document.gotowe, Prototype i dom: loaded, Dojo i addOnLoad lub Google dla [your framework] i "document ready",.

Jeśli nie wybrałeś frameworka, ale jesteś zainteresowany, jQuery jest dobrym miejscem na początek. Nie zmienia to żadnej z podstawowych funkcjonalności Javascript i na ogół pozostanie poza twoim sposób i pozwolić ci robić rzeczy, jak chcesz, kiedy chcesz.

Joomla jest dostarczana z MooTools, więc najłatwiej będzie użyć biblioteki MooTools dla dodatkowego kodu. MooTools jest dostarczany z niestandardowym zdarzeniem o nazwie domready, które jest wywoływane po załadowaniu strony i przetworzeniu drzewa dokumentu.

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

Więcej informacji o MooTools można znaleźć tutaj . Joomla 1.5 jest obecnie dostarczany z MT1.1, Podczas gdy Joomla 1.6 alpha będzie zawierać MT1.2

Osobiście wolę tę metodę . Nie tylko pozwala na posiadanie wielu funkcji onload, ale jeśli jakiś skrypt zdefiniował ją przed, ta metoda jest wystarczająco ładna, aby sobie z tym poradzić... Jedynym problemem pozostaje, jeśli strona ładuje kilka skryptów, które nie używają funkcji window.addLoad(); ale to jest ich problem :).

P. S. Jego również wielki, jeśli chcesz "łańcucha" więcej funkcji później.

To jest brudny ale krótszy sposób: P

function load(){
   *code*
}

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

Ponieważ zawsze dołączam pliki jQuery/bootstrap JS na dole dokumentu i nie mają dostępu do $ nad dokumentem, opracowałem maleńką wtyczkę" init", która jest jednym i jedynym skryptem JS, który dołączam na samej górze moich stron:

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;
    }
};

Za pomocą tego mogę zdefiniować dowolny anonimowy loader nad stroną, przed włączeniem jQuery i bootstrap i upewnić się, że odpali po jQuery:

init.push(function() {

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

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