Es existiert mittlerweile Vielzahl an JavaScript-Anwendungen im Web. Eine sehr bekannte ist z.B. die Server-Kundenverwaltungssoftware Plesk, aber auch Epesi, das wir schon am 1000. bei den Projektmanagement-Tools vorgestellt haben.
Alle haben dabei eines gemeinsam, nämlich eine Ladeanzeige. Diese sperrt die Seite solange, (bei Plesk) oder blendet zumindest einen Layer in der Mitte der Seite ein (Epesi) bis die Seite vollkommen geladen wurde. Ein vollkommen unnötiges Feature, das die Arbeit nur erschwert und den Benutzer frustriert. Wenigstens bei Plesk kann man es abschalten.
Doch nun zur Problematik: viele Jung-JavaScriptler wollen diese Funktion nachbauen und sie tun es meist genauso falsch, wie die Entwickler der oben genannten Tools es gemacht haben.
Aber weshalb nun dieser Artikel? Er soll nicht die Vor- oder Nachteile erörtern und auch nicht davon abbringen, dieses „Feature“ zu implementieren, er soll einfach nur zeigen, wie man es machen sollte, wenn man es machte.

Der Fehler:
Die einfachste Lösung ist diese:

Code:

// Layer einblenden

window.onload = function() {
    // Layer ausblenden
};

Das ist aber definitiv nicht der richtige Weg!
Warum?
Das load-Event wartet, bis wirklich alle Elemente der Seite geladen wurden, das schließt auch Bilder und Fremdinhalte ein. Wenn jetzt also besonders große Grafiken auf der Seite vorhanden sind oder Inhalte von einem fremden Server eingebunden werden, der derzeit etwas schwach auf der Brust ist, wartet der Benutzer sich tot bis das Timeout zuschlägt oder die Grafik doch noch vollständig geladen wurde.
Dieser Weg ist also definitiv der Falsche!

Die Lösung:
Es gibt ein weiteres Event, das sich DOMContentLoaded nennt. Dieses ist aus vielen JavaScript-Frameworks gut bekannt, wie z.B. jQuery:

Code:

$(document).ready(function() {
    // …
});

Es ist also ganz einfach, das load-Event durch das ready-Event zu ersetzen.
Doch was ist, wenn man kein JavaScript-Framework einsetzt?
DOMContentLoaded existiert in dieser Form nur in Mozilla-Browsern, doch soll der Layer auch in anderen Browsern angezeigt werden.

Code:

// Layer einblenden

window.addEventListener('DOMContentLoaded', function() {
    // Layer ausblenden
}, null);

würde also z.B. nicht im IE funktionieren.
Möglich ist eine Crossbrowser-Kompatibilität aber dennoch, immerhin schaffen die JavaScript-Frameworks das auch. Um herauszufinden wie, kann man einen Blick in den Quellcodes des Frameworks werfen, allerings ist der Code meist weitestgehend unkommentiert.
Es hat sich aber mal jemand die Mühe gemacht, und ein Tutorial zu diesem Thema zu schreiben, welches hier zu finden ist: Are you ready for this

Mit diesem Code gerüstet, kann man sein Vorhaben nun ganz einfach verwirklichen:

Code:

// Layer einblenden

registerOnLoad(function() {
    // Layer ausblenden
});

Links zum Thema:

• Gecko-Specific DOM Events - MDC
• Introducing $(document).ready() » Learning jQuery - Tutorials and Information
• Multiple $(document).ready() » Learning jQuery - Tutorials and Information