Sollte ich window.onload oder einen Skriptblock verwenden?

Question

Ich habe eine Javascript-Funktion, die das DOM manipuliert, wenn sie aufgerufen wird (fügt CSS-Klassen, etc.). Diese Funktion wird aufgerufen, wenn der Benutzer einige Werte in einem Formular ändert. Wenn das Dokument zum ersten Mal geladen wird, möchte ich diese Funktion aufrufen, um den Ausgangszustand vorzubereiten (was in diesem Fall einfacher ist als das Einrichten des DOM von der Serverseite in den richtigen Ausgangszustand).

Ist es besser, window.onload zu verwenden, um diese Funktionalität zu tun, oder einen Skriptblock nach den DOM-Elementen zu haben, die ich ändern muss? Warum ist es in beiden Fällen besser?

Zum Beispiel:

function updateDOM(id) {
    // updates the id element based on form state
}

sollte ich es über aufrufen:

window.onload = function() { updateDOM("myElement"); };

oder:

<div id="myElement">...</div>
<script language="javascript">
    updateDOM("myElement");
</script>

Ersteres scheint der Standardweg zu sein, aber letzteres scheint genauso gut zu sein, vielleicht sogar besser, da es das Element aktualisiert, sobald das Skript aufgerufen wird, und solange es nach dem Element platziert wird, sehe ich kein Problem damit.

Haben Sie eine Idee? Ist die eine Version wirklich besser als die andere?

Answer 1

Das onload-Ereignis wird als der richtige Weg, um es zu tun, aber wenn Sie nichts dagegen haben, mit einem Javascript-Bibliothek, jQuery's $ (Dokument).ready() ist noch besser.

$(document).ready(function(){
  // manipulate the DOM all you want here
});

Die Vorteile sind:

1. Rufen Sie $(document).ready() so oft auf, wie Sie wollen, um zusätzlichen Code zu registrieren - Sie können window.onload nur einmal setzen.
2. Die Aktionen $(document).ready() finden statt, sobald das DOM vollständig ist - window.onload muss auf Bilder und dergleichen warten.

Ich hoffe, ich werde nicht der Typ, der bei jeder JavaScript-Frage jQuery vorschlägt, aber es ist wirklich toll.

Answer 2

Ich habe viel Javascript geschrieben und window.onload ist ein schrecklich Art und Weise, dies zu tun. Sie ist spröde und wartet, bis jede Asset der Seite geladen wurde. Wenn also ein Bild ewig braucht oder eine Ressource erst nach 30 Sekunden einen Timeout verursacht, wird Ihr Code nicht ausgeführt, bevor der Benutzer die Seite sehen/manipulieren kann.

Und wenn ein anderes Javascript-Programm beschließt, window.onload = function() {} zu verwenden, wird Ihr Code weggeblasen.

Der richtige Weg, um Ihren Code auszuführen, wenn die Seite bereit ist, ist zu warten, bis das Element, das Sie ändern müssen, bereit/verfügbar ist. Viele JS-Bibliotheken haben dies als integrierte Funktionalität.

Sehen Sie sich das an:

• http://docs.jquery.com/Events/ready#fn
• http://developer.yahoo.com/yui/event/#onavailable

Answer 3

Unbedingt verwenden onload . Bewahren Sie Ihre Skripte getrennt von Ihrer Seite auf, sonst werden Sie bei dem Versuch, sie später zu entwirren, wahnsinnig.

Answer 4

Einige JavaScript-Frameworks, wie z. B. mootools erhalten Sie Zugang zu einem besonderen Ereignis namens "domready":

Enthält das Fensterereignis 'domready', das ausgeführt wird, wenn das DOM geladen ist. Um sicherzustellen, dass DOM-Elemente vorhanden sind, wenn der Code, der auf sie zugreifen soll, ausgeführt wird, sollten sie innerhalb des Ereignisses "domready" platziert werden.

window.addEvent('domready', function() {
  alert("The DOM is ready.");
});

Answer 5

Window.onload im IE wartet ebenfalls auf das Laden der Binärinformationen. Es handelt sich nicht um eine strenge Definition von "wenn das DOM geladen ist". Es kann also eine erhebliche Verzögerung zwischen dem Zeitpunkt, an dem die Seite als geladen gilt, und dem Zeitpunkt, an dem Ihr Skript ausgelöst wird, geben. Aus diesem Grund würde ich empfehlen, in einem der zahlreichen JS-Frameworks (Prototyp / Query), um die schwere Heben für Sie zu behandeln.