Wie führe ich eine Funktion aus, wenn die Seite vollständig geladen ist?

307

Ich muss JavaScript-Code ausführen, wenn die Seite vollständig geladen ist. Dies schließt Dinge wie Bilder ein.

Ich weiß, dass Sie überprüfen können, ob das DOM bereit ist, aber ich weiß nicht, ob dies mit dem vollständigen Laden der Seite identisch ist.

javascript Ben Shelock
quelle
7
Wie überprüfen Sie, ob das DOM bereit ist?
Mads Skjern

Antworten:

442

Das heißt load. Es kam waaaaay, bevor DOM ready fertig war, und DOM ready wurde tatsächlich aus genau dem Grund erstellt, der loadauf Bilder wartete.

window.addEventListener('load', function () {
  alert("It's loaded!")
})
Matchu
quelle
3
Nur um zu verdeutlichen (wenn ich darf), wird im Vergleich zu DOM bereit window.onloadaufgerufen, wenn jede Seitenkomponente / Ressource (dh * einschließlich * Bilder). Habe ich recht?
BreakPhreak
19
@ BreakPhreak: Ja :) onloadwartet auf alle Ressourcen, die Teil des Dokuments sind. Dies schließt natürlich dynamisch erstellte Anforderungen aus, die nicht Teil des Dokuments selbst sind, z. B. eine AJAX-Anforderung.
Matchu
3
Skript ist nicht vollständig geladen
HD ..
Was passiert, wenn mein Skript dynamisch geladen wird und ein "Lade" -Ereignis aufgetreten ist, bevor ich meinen Handler hinzugefügt habe?
Pamelus
31
Ein besserer Weg wäre addEventListener("load", function(){… })anstatt die onloadImmobilie zu überschreiben .
user4642212
30

Normalerweise können Sie verwenden window.onload, aber Sie werden möglicherweise feststellen, dass aktuelle Browser nicht ausgelöst werden, window.onloadwenn Sie die Schaltflächen für den Vor- / Zurück-Verlauf verwenden.

Einige Leute schlagen seltsame Verzerrungen vor, um dieses Problem zu umgehen. Wenn Sie jedoch nur einen window.onunloadHandler erstellen (auch einen, der nichts tut), wird dieses Caching-Verhalten in allen Browsern deaktiviert . Das MDC dokumentiert diese "Funktion" ziemlich gut, aber aus irgendeinem Grund verwenden immer noch Leute setIntervalund andere seltsame Hacks.

Einige Versionen von Opera haben einen Fehler, der behoben werden kann, indem Sie irgendwo auf Ihrer Seite Folgendes hinzufügen:

<script>history.navigationMode = 'compatible';</script>

Wenn Sie nur versuchen, eine Javascript-Funktion zu erhalten, die einmal pro Ansicht aufgerufen wird (und nicht unbedingt, nachdem das DOM vollständig geladen wurde), können Sie Folgendes tun:

<img src="javascript:location.href='javascript:yourFunction();';">

Mit diesem Trick lade ich beispielsweise eine sehr große Datei auf einem Ladebildschirm in den Cache vor:

<img src="bigfile"
onload="this.location.href='javascript:location.href=\'javascript:doredir();\';';doredir();">
Geocar
quelle
Kann jemand klären, wie dieser Trick funktioniert? Zu kompliziert für mich, doh ..
Razzle
20

Der Vollständigkeit halber möchten Sie es möglicherweise auch an DOMContentLoaded binden, das jetzt weitgehend unterstützt wird

document.addEventListener("DOMContentLoaded", function(event){
  // your code here
});

Weitere Informationen: https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded

murb
quelle
7
Diese Antwort ist genau das Gegenteil von dem, was in der Frage gestellt wurde.
Muhammad bin Yusrat
2
In der Tat wird das DOMContentLoaded-Ereignis ausgelöst, wenn alle DOM-Inhalte geladen wurden, bevor alle Abhängigkeiten geladen wurden. Da Benutzer im Thread der Antworten verwiesen haben, fand $.readyich, dass dies einen guten Beitrag geleistet hat. Übrigens. Ich würde die addEventListener-method jedoch auch für das loadEreignis verwenden, da Sie mehrere Rückrufe haben können:window.addEventListener("load", function(event){ // your code here });
murb
16

Versuchen Sie dies nur, nachdem die gesamte Seite geladen wurde

Mit Javascript

window.onload = function(){
    // code goes here
};

Von Jquery

$(window).bind("load", function() {
    // code goes here
});
absiddiqueLive
quelle
1
$(window)lässt mich denken, das wäre jquery - richtig? Oder bin ich mit einer Javascript-Syntax verwirrt? (Ich bin neu bei JS).
Azendale
2
Warum nicht einfach verwenden, $(document).ready();wenn jQuery verfügbar ist?
Andreas
Ihr ist das Dokument (mehr oder weniger nur das analysierte HTML), das andere ("Laden") ist alles, einschließlich Bilder und Stile. Kommt darauf an was du brauchst.
Amenthes
11

Versuchen Sie diesen Code

document.onreadystatechange = function () {
  if (document.readyState == "interactive") {
    initApplication();
  }
}

Weitere Informationen finden Sie unter https://developer.mozilla.org/en-US/docs/DOM/document.readyState

Jacob Nelson
quelle
Ja, das ist hilfreich. Vielen Dank ~
Bravo Yeung
2
"interactive"ist nicht voll geladen. "complete"ist voll geladen
Ryan Walker
Zu guter Letzt! Vielen Dank, Jacob. Alle zahlreichen hier aufgeführten Methoden sind fehlgeschlagen (bestenfalls würde ein Radiobutton aktualisiert und eine resultierende Berechnung könnte durchgeführt werden, aber die Schaltfläche würde nicht gedrückt erscheinen). Ihre Methode macht den Trick.
Sekret
8

Das Fenster.onload-Ereignis wird ausgelöst, wenn alles geladen ist, einschließlich Bilder usw.

Sie möchten den DOM-Bereitschaftsstatus überprüfen, wenn Ihr js-Code so früh wie möglich ausgeführt werden soll, Sie jedoch weiterhin auf DOM-Elemente zugreifen müssen.

Codefly
quelle
8

Javascript, das das onLoad()Ereignis verwendet, wartet vor dem Ausführen auf das Laden der Seite.

<body onload="somecode();" >

Wenn Sie die Dokumentbereitschaftsfunktion des jQuery-Frameworks verwenden, wird der Code geladen, sobald das DOM geladen wird und bevor der Seiteninhalt geladen wird:

$(document).ready(function() {
    // jQuery code goes here
});
Defoncesko
quelle
7

Möglicherweise möchten Sie window.onload verwenden , da die Dokumente angeben, dass es erst ausgelöst wird, wenn sowohl das DOM bereit ist als auch ALLE anderen Elemente auf der Seite (Bilder usw.) geladen sind.

Marc Novakowski
quelle
Ah brillant. Nun, ich habe das getan. Das letzte Bild auf der Seite ist das folgende: <img src = "imdbupdate.php? Update = ajax" style = "display: hidden" onload = "window.location = 'movies.php? Do = admincp'" /> Allerdings leitet mich nicht weiter
Ben Shelock
...Was? Sie möchten umleiten, sobald ein Bild geladen wurde?
Matchu
Ich bin mir nicht sicher, warum Sie das möchten, aber der Grund, warum es nicht umgeleitet wird, kann sein, dass es angezeigt wird: versteckt, und daher macht sich der Browser nicht die Mühe, es zu laden, da es nicht angezeigt wird.
Matchu
Vielleicht ist es nur ein verstecktes Bild, das etwas Wichtiges auf dem Server tut, z. B. einen Treffer verfolgen oder etwas in der Datenbank tun?
Marc Novakowski
Ich kann das bekommen, aber es nachher umleiten zu lassen, macht für mich keinen Sinn. Warum überhaupt eine Seite, wenn der Benutzer keine Zeit damit verbringen soll? Und wenn das Ziel darin besteht, beim Laden umzuleiten, warum nicht einfach ein window.onload-Ereignis verwenden, da es insgesamt eine sauberere Implementierung ist?
Matchu
3

Und hier ist eine Möglichkeit, dies mit PrototypeJS zu tun :

Event.observe(window, 'load', function(event) {
    // Do stuff
});
Mark Biek
quelle
2

In modernen Browsern mit modernem Javascript (> = 2015) können Sie type="module"Ihrem Skript-Tag hinzufügen , und alles in diesem Skript wird ausgeführt, nachdem die ganze Seite geladen wurde. z.B:

<script type="module">
  alert("runs after") // Whole page loads before this line execute
</script>
<script>
  alert("runs before")
</script>

Auch ältere Browser verstehen nomoduleAttribute. Etwas wie das:

<script nomodule>
  alert("tuns after")
</script>

Weitere Informationen finden Sie unter javascript.info .

Pouria Moosavi
quelle
1

Wenn Sie stattdessen viele onloadverwenden müssen $(window).load(jQuery):

$(window).load(function() {
    //code
});
Sebastien Horin
quelle
1

Die onload- Eigenschaft des GlobalEventHandlers-Mixins ist ein Ereignishandler für das Ladeereignis eines Fensters, XMLHttpRequest, Elements usw., das beim Laden der Ressource ausgelöst wird .

Im Grunde genommen hat Javascript bereits eine Onload-Methode im Fenster, die ausgeführt wird, welche Seite einschließlich Bilder vollständig geladen ist ...

Sie können etwas tun:

var spinner = true;

window.onload = function() {
  //whatever you like to do now, for example hide the spinner in this case
  spinner = false;
};
Alireza
quelle
-1

Update 2019: Dies war die Antwort, die für mich funktioniert hat. Da ich mehrere Ajax-Anforderungen benötigte, um zuerst Daten auszulösen und zurückzugeben, um die Listenelemente zu zählen. 

$(document).ajaxComplete(function(){
       alert("Everything is ready now!");
});
norcal johnny
quelle