Wann sollte "window.onload" verwendet werden?
In JavaScript, wenn ich möchte, dass ein Skript ausgeführt wird, einmal, wenn die Seite geladen hat, sollte ich window.onload
oder einfach nur das script schreiben?
Zum Beispiel, wenn ich ein pop-up, soll ich schreiben (direkt in der <script>
tag):
alert("hello!");
Oder:
window.onload = function() {
alert("hello!");
}
Beide scheinen zu laufen, nachdem die Seite geladen ist. Was ist den der Unterschied?
InformationsquelleAutor der Frage Jonathan Lam | 2013-11-24
Du musst angemeldet sein, um einen Kommentar abzugeben.
Die erste nur ausgeführt wird, wenn der browser bekommt.
Die zweite wartet, bis das Fenster geladen werden, bevor es läuft.
In der Regel sollten Sie tun die zweite, aber Sie sollten fügen Sie einen Ereignis-listener, um es statt der Definition der Funktion. Zum Beispiel:
InformationsquelleAutor der Antwort Crayon Violent
Die anderen Antworten scheinen alle out-of-date
First off, putting-Skripts an der Spitze und mit
window.onload
ist ein anti-pattern. Es bleibt von IE Tage am besten oder mis-Verständnis von JavaScript und den browser im schlimmsten Fall.Können Sie einfach bewegen Sie Ihre Skripte, die das Ende Ihrer html -
Der einzige Grund, warum Menschen verwendet
window.onload
ist, weil Sie irrtümlich angenommen-Skripten benötigt, um gehen in diehead
Abschnitt. Weil die Dinge in der korrekten Reihenfolge ausgeführt, wenn Sie Ihr Skript in den head-Bereich, dann wird der Körper und Ihre Inhalte noch nicht vorhanden sind, durch definition von auszuführen, um.Den hacky-workaround zu nutzen, um die
window.onload
warten, bis der rest der Seite geladen ist. Verschieben Sie Ihr Skript an der Unterseite auch dadurch gelöst, dass Problem und jetzt gibt es keine Notwendigkeit zu verwendenwindow.onload
da sich Ihr Körper und die Inhalte werden bereits geladen.Die modernere Lösung ist die Verwendung der
defer
tag auf Ihrer Skripte, sondern zu nutzen, dass Ihre Skripten müssen alle extern sein.Dies hat den Vorteil, dass der browser startet den Download der Skripte sofort und es wird führen Sie Sie in der Reihenfolge angegeben, aber es wird warten, um Sie auszuführen, bis, nachdem die Seite geladen hat, keine Notwendigkeit für
window.onload
oder besser, aber noch nicht benötigtewindow.addEventListener('load', ...
InformationsquelleAutor der Antwort gman
Hier ist die Dokumentation auf MDN.
Laut:
Ihre erste snippet-code wird ausgeführt, sobald der browser-hit dieser Stelle im HTML-Format.
Dem zweiten snippet löst popup, wenn der DOM und alle Bilder vollständig geladen sind (siehe technische Daten).
Angesichts der
alert()
- Funktion, ist es eigentlich egal, an welchem Punkt wird es laufen (es hängt nicht von irgendetwas nebenwindow
Objekt). Aber wenn Sie wollen, zu manipulieren, die DOM - Sie sollten auf jeden Fall warten, bis es richtig geladen.InformationsquelleAutor der Antwort Slava Fomin II
Dass hängt davon ab, ob Sie ausgeführt werden soll, wenn das script-element angetroffen wird, oder wenn Sie wollen, dass es ausgeführt werden, wenn das load-Ereignis feuert (das ist nach das gesamte Dokument (einschließlich solche Dinge wie Bilder) geladen hat).
Weder immer Recht.
Im Allgemeinen, aber ich möchte vermeiden, zuweisen von Funktionen direkt
onload
zugunsten der Verwendung vonaddEventListener ()
(mit Kompatibilitäts-Bibliotheken, wenn ich brauchte, um die Unterstützung für ältere Browser).InformationsquelleAutor der Antwort Quentin
Den Grund für das warten auf das DOM geladen ist, so dass Sie können beliebige Elemente, die geladen werden, nachdem Ihr Skript. Wenn Sie nur die Schaffung einer
alert
hat, ist es egal. Lassen Sie uns sagen, aber Sie waren der Ausrichtung auf eindiv
in der markup-Symbole, nachdem Ihr Skript, würden Sie eine Fehlermeldung erhalten, wenn Sie nicht warten, bis das Stück in der DOM-Struktur zu laden.document.ready
ist eine tolle alternative zuwindow.onload
wenn Sie mit jQuery.Siehe hier: Fenster.onload-vs $(document).ready()
InformationsquelleAutor der Antwort SeeMeCode
Haben Sie drei alternativen:
Direkt im script-tag läuft es, sobald es analysiert.
Innen
document.addEventListener( "DOMContentLoaded", function(){});
wird es ausgeführt, sobald das DOM bereit ist.Innen
window.onload function(){})
wird ausgeführt, sobald die Seite alle Ressourcen geladen sind.InformationsquelleAutor der Antwort Henrik