737

Ich führe ein externes Skript mit einem <script>Inside aus <head>.

Da das Skript jetzt ausgeführt wird, bevor die Seite geladen wurde, kann ich <body>unter anderem nicht auf das zugreifen . Ich möchte etwas JavaScript ausführen, nachdem das Dokument "geladen" wurde (HTML vollständig heruntergeladen und im RAM). Gibt es Ereignisse, an die ich mich bei der Ausführung meines Skripts anschließen kann und die beim Laden der Seite ausgelöst werden?

javascript html dom-events pageload Der Blitz
quelle

837

Diese Lösungen werden funktionieren:

<body onload="script();">

oder

document.onload = function ...

oder auch

window.onload = function ...

Beachten Sie, dass die letzte Option ein besserer Weg ist, da sie unauffällig ist und als Standard angesehen wird .

marcgg
quelle

5

Was ist der Unterschied zwischen <body onload = "script ();"> und document.onload = function ...?

Mentoliptus

11

@mentoliptus: document.onload=ist nicht aufdringlich en.wikipedia.org/wiki/Unobtrusive_JavaScript

marcgg

3

Skript im HTML ... nein nein nein $ (function () {code here}); <- javascript.js kann in head platziert werden und wird nach DOM

21

@gerdi OP erwähnte nichts über jQuery. Ich habe in meiner Antwort auch eine unauffällige Option angegeben.

Marcgg

1

document.onload hat bei mir nicht funktioniert. Ich habe diesen Beitrag mit demselben Problem gefunden: stackoverflow.com/questions/5135638/… . Scheint nicht wie document.onload ist eine Option.

Spottedmahn

196

Einigermaßen portable Methode ohne Framework, mit der Ihr Skript eine Funktion zum Ausführen beim Laden festlegen kann:

if(window.attachEvent) {
    window.attachEvent('onload', yourFunctionName);
} else {
    if(window.onload) {
        var curronload = window.onload;
        var newonload = function(evt) {
            curronload(evt);
            yourFunctionName(evt);
        };
        window.onload = newonload;
    } else {
        window.onload = yourFunctionName;
    }
}

Chaos
quelle

10

+1 für fast genau das, was ich mir vor 6 Monaten einfallen lassen musste. Code wie dieser kann erforderlich sein, wenn andere Frameworks und Code, auf die Sie keinen Einfluss haben, Onload-Ereignisse hinzufügen und Sie dies auch möchten, ohne die anderen Onload-Ereignisse zu löschen. Ich habe meine Implementierung als Funktion eingefügt und es war var newonload = function (evt) {curronload (evt); newOnload (evt); }, weil aus irgendeinem Grund für das von mir verwendete Framework ein Ereignis an das Onload-Ereignis übergeben werden muss.

Grant Wagner

6

Ich habe gerade beim Testen festgestellt, dass der geschriebene Code dazu führt, dass Handler in einer undefinierten Reihenfolge ausgelöst werden, wenn sie mit attachEvent () angehängt werden. Wenn die Reihenfolge der Handlerausführung wichtig ist, können Sie den Zweig window.attachEvent weglassen.

Grant Wagner

Dies fügt also diese Funktion als ZUSÄTZLICHE Funktion hinzu, um OnLoad auszuführen, richtig? (anstatt ein bestehendes Onload-Ereignis zu ersetzen)

Clay Nichols

@ClayNichols: Richtig.

Chaos

2

Gute Lösung, aber jetzt veraltet: developer.mozilla.org/en-US/docs/Web/API/EventTarget/…

Renan

192

Beachten Sie, dass das Laden der Seite mehr als eine Phase umfasst. Übrigens ist dies reines JavaScript

"DOMContentLoaded"

Dieses Ereignis wird ausgelöst, wenn das ursprüngliche HTML-Dokument vollständig geladen und analysiert wurde , ohne darauf zu warten, dass Stylesheets, Bilder und Unterrahmen vollständig geladen sind . Zu diesem Zeitpunkt können Sie das Laden von Bildern und CSS programmgesteuert basierend auf dem Benutzergerät oder der Bandbreitengeschwindigkeit optimieren.

Wird ausgeführt, nachdem DOM geladen wurde (vor img und css):

document.addEventListener("DOMContentLoaded", function(){
    //....
});

Hinweis: Synchrones JavaScript unterbricht das Parsen des DOM. Wenn Sie möchten, dass das DOM so schnell wie möglich analysiert wird, nachdem der Benutzer die Seite angefordert hat, können Sie Ihr JavaScript asynchronisieren und das Laden von Stylesheets optimieren

"Belastung"

Ein ganz anderes Ereignis, Laden , sollte nur zum Erkennen einer vollständig geladenen Seite verwendet werden . Es ist ein unglaublich beliebter Fehler, load zu verwenden, wenn DOMContentLoaded viel angemessener wäre. Seien Sie also vorsichtig.

Exectues nachdem alles geladen und analysiert wurde:

window.addEventListener("load", function(){
    // ....
});

MDN-Ressourcen:

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

MDN-Liste aller Ereignisse:

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

DevWL
quelle

1

@ Peter ziemlich sicher, dass dies allein wahrscheinlich am besten steht, wenn es am Ende Ihrer Javascript-Dateien, so dass es zuletzt ausgeführt wird

arodebaugh

Javascript pausiert das Rendern des DOM dort. Der beste Weg wäre, es am Ende der Seite zu platzieren oder Javascript async in den Header zu laden.

DevWL

Dies ist die vollständigste Antwort. Onload ist danach, aber die Leute merken das zuerst nicht.

tfont

1

Re asynchrones Javascript : Zur Verdeutlichung gibt es zwei Möglichkeiten für Skripte, die nicht sofort ausgeführt werden. Von diesen ist das Aufschieben normalerweise dem Asynchronisieren vorzuziehen - da das Aufschieben das Parsen / Rendern von HTML nicht unterbricht - und wenn es ausgeführt wird, ist DOM garantiert bereit. Laden Sie JavaScript effizient mit Defer und Async .

ToolmakerSteve

+1 Ich habe versucht zu window.onload = ...denken, dass mein Skript warten würde, bis alles vollständig heruntergeladen wurde, bevor es ausgeführt wird, aber es scheint sich window.onloadtatsächlich so zu verhalten document.addEventListener("DOMContentLoaded", ..., während das window.addEventListener("load", ...wirklich darauf wartet, dass alles vollständig heruntergeladen wird. Ich hätte gedacht, dass window.onloaddas eher gleichbedeutend sein sollte window.addEventListener("load", ...als document.addEventListener("DOMContentLoaded", ...?? Ich habe das gleiche Ergebnis in Chrome und FF erhalten.

wkille

121

Sie können ein "onload" -Attribut in den Body einfügen

...<body onload="myFunction()">...

Oder wenn Sie jQuery verwenden, können Sie dies tun

$(document).ready(function(){ /*code here*/ }) 

or 

$(window).load(function(){ /*code here*/ })

Ich hoffe es beantwortet deine Frage.

Beachten Sie, dass das Laden von $ (Fenster) ausgeführt wird, nachdem das Dokument auf Ihrer Seite gerendert wurde.

Nordes
quelle

65

Wenn die Skripte in das <head>Dokument geladen werden , kann das deferAttribut im Skript-Tag verwendet werden.

Beispiel:

<script src="demo_defer.js" defer></script>

Von https://developer.mozilla.org :

verschieben

Dieses boolesche Attribut gibt einem Browser an, dass das Skript ausgeführt werden soll, nachdem das Dokument analysiert wurde, jedoch bevor DOMContentLoaded ausgelöst wird.

Dieses Attribut darf nicht verwendet werden, wenn das src-Attribut fehlt (dh für Inline-Skripte). In diesem Fall hätte es keine Auswirkung.

Um einen ähnlichen Effekt für dynamisch eingefügte Skripte zu erzielen, verwenden Sie stattdessen async = false. Skripte mit dem Attribut defer werden in der Reihenfolge ausgeführt, in der sie im Dokument angezeigt werden.

Daniel Price
quelle

Ich liebe diese Lösung, weil ich keinen Javascript-Code brauche, sondern nur ein HTML-Attribut <3

sarkiroka

27

Hier ist ein Skript, das auf dem verzögerten Laden von js basiert, nachdem die Seite geladen wurde.

<script type="text/javascript">
  function downloadJSAtOnload() {
      var element = document.createElement("script");
      element.src = "deferredfunctions.js";
      document.body.appendChild(element);
  }

  if (window.addEventListener)
      window.addEventListener("load", downloadJSAtOnload, false);
  else if (window.attachEvent)
      window.attachEvent("onload", downloadJSAtOnload);
  else window.onload = downloadJSAtOnload;
</script>

Wo platziere ich das?

Fügen Sie Code direkt vor dem </body>Tag in Ihren HTML-Code ein (am Ende Ihrer HTML-Datei).

Was tut es?

Dieser Code besagt, dass Sie warten müssen, bis das gesamte Dokument geladen ist, und dann die externe Datei laden deferredfunctions.js.

Hier ist ein Beispiel für den obigen Code - Rendering von JS verzögern

Ich schrieb diese basierend auf defered Laden von Javascript Page Speed google Konzept und auch aus diesem Artikel sourced Aufschieben Laden Sie Javascript

Glücklich
quelle

20

Schauen Sie sich Hooking document.onloadoder in jQuery an $(document).load(...).

Daniel A. White
quelle

Ist diese Veranstaltung zuverlässig? (Cross browser .. IE6 + FF2 + etc)

TheFlash

1

Ja, dies ist ein browserübergreifendes Standard-DOM.

Daniel A. White

16

Es ist eigentlich window.onload, das mehr Standard ist, nicht document.onload. AFAIK

Peter Bailey

11

Arbeits Fiddle auf<body onload="myFunction()">

<!DOCTYPE html>
<html>
 <head>
  <script type="text/javascript">
   function myFunction(){
    alert("Page is loaded");
   }
  </script>
 </head>

 <body onload="myFunction()">
  <h1>Hello World!</h1>
 </body>    
</html>

Aamir Shahzad
quelle

10

<script type="text/javascript">
  function downloadJSAtOnload() {
   var element = document.createElement("script");
   element.src = "defer.js";
   document.body.appendChild(element);
  }
  if (window.addEventListener)
   window.addEventListener("load", downloadJSAtOnload, false);
  else if (window.attachEvent)
   window.attachEvent("onload", downloadJSAtOnload);
  else window.onload = downloadJSAtOnload;
</script>

http://www.feedthebot.com/pagespeed/defer-loading-javascript.html

Frankey
quelle

8

Wenn Sie jQuery verwenden,

$(function() {...});

ist äquivalent zu

$(document).ready(function () { })

oder eine andere kurze Hand:

$().ready(function () { })

Siehe Welches Ereignis wird bei JQuery $ function () ausgelöst? und https://api.jquery.com/ready/

Benjamin Crouzier
quelle

7

document.onreadystatechange = function(){
     if(document.readyState === 'complete'){
         /*code here*/
     }
}

Schauen Sie hier: http://msdn.microsoft.com/en-us/library/ie/ms536957(v=vs.85).aspx

Arthur Tsidkilov
quelle

2

einzeilig: document.onload = function () {...}

colm.anseo

7

Ich finde manchmal auf komplexeren Seiten, dass nicht alle Elemente vom Zeitfenster geladen wurden. Onload wird ausgelöst. Wenn dies der Fall ist, fügen Sie setTimeout hinzu, bevor Ihre zu verzögernde Funktion einen Moment dauert. Es ist nicht elegant, aber es ist ein einfacher Hack, der gut rendert.

window.onload = function(){ doSomethingCool(); };

wird...

window.onload = function(){ setTimeout( function(){ doSomethingCool(); }, 1000); };

Charles Jaimet
quelle

5

Definieren Sie einfach, <body onload="aFunction()">dass aufgerufen wird, nachdem die Seite geladen wurde. Ihr Code im Skript wird dann von eingeschlossen aFunction() { }.

Norbert Hartl
quelle

4

<body onload="myFunction()">

Dieser Code funktioniert gut.

Die window.onloadMethode hat jedoch verschiedene Abhängigkeiten. Es funktioniert also möglicherweise nicht immer.

Akarsh Satija
quelle

3

Verwenden der YUI-Bibliothek (ich liebe es):

YAHOO.util.Event.onDOMReady(function(){
    //your code
});

Tragbar und schön! Wenn Sie YUI jedoch nicht für andere Zwecke verwenden (siehe Dokument), würde ich sagen, dass es sich nicht lohnt, es zu verwenden.

NB: Um diesen Code zu verwenden, müssen Sie 2 Skripte importieren

<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/yahoo/yahoo-min.js" ></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/event/event-min.js" ></script>

Valentin Jacquemin
quelle

3

Es gibt eine sehr gute Dokumentation zum Erkennen, ob ein Dokument mit Javascript oder Jquery geladen wurde .

Mit dem nativen Javascript kann dies erreicht werden

if (document.readyState === "complete") {
 init();
 }

Dies kann auch innerhalb des Intervalls erfolgen

var interval = setInterval(function() {
    if(document.readyState === 'complete') {
        clearInterval(interval);
        init();
    }    
}, 100);

ZB von Mozilla

switch (document.readyState) {
  case "loading":
    // The document is still loading.
    break;
  case "interactive":
    // The document has finished loading. We can now access the DOM elements.
    var span = document.createElement("span");
    span.textContent = "A <span> element.";
    document.body.appendChild(span);
    break;
  case "complete":
    // The page is fully loaded.
    console.log("Page is loaded completely");
    break;
}

Verwenden von Jquery Nur um zu überprüfen, ob DOM bereit ist

// A $( document ).ready() block.
$( document ).ready(function() {
    console.log( "ready!" );
});

Um zu überprüfen, ob alle Ressourcen geladen sind, verwenden Sie window.load

 $( window ).load(function() {
        console.log( "window loaded" );
    });

quelle

3

Verwenden Sie diesen Code mit der jQuery-Bibliothek, dies würde einwandfrei funktionieren.

$(window).bind("load", function() { 

  // your javascript event

});

Harish Kumar
quelle

Fügen Sie hier eine Beschreibung hinzu

Mathews Sunny

3

$(window).on("load", function(){ ... });

.ready () funktioniert am besten für mich.

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

.load () wird funktionieren, aber es wird nicht warten, bis die Seite geladen ist.

jQuery(window).load(function () { ... });

Funktioniert bei mir nicht, bricht das nächste Inline-Skript. Ich verwende auch jQuery 3.2.1 zusammen mit einigen anderen jQuery-Gabeln.

Um das Laden von Overlays auf meinen Websites auszublenden, verwende ich Folgendes:

<script>
$(window).on("load", function(){
$('.loading-page').delay(3000).fadeOut(250);
});
</script>

Zach Reynolds
quelle

3

JavaScript

document.addEventListener('readystatechange', event => { 

    // When HTML/DOM elements are ready:
    if (event.target.readyState === "interactive") {   //does same as:  ..addEventListener("DOMContentLoaded"..
        alert("hi 1");
    }

    // When window loaded ( external resources are loaded too- `css`,`src`, etc...) 
    if (event.target.readyState === "complete") {
        alert("hi 2");
    }
});

Gleiches gilt für jQuery:

$(document).ready(function() {   //same as: $(function() { 
     alert("hi 1");
});

$(window).load(function() {
     alert("hi 2");
});

HINWEIS: - Verwenden Sie das folgende Markup nicht (da es andere gleichartige Deklarationen überschreibt):

document.onreadystatechange = ...

T.Todua
quelle

1

Wie Daniel sagt, könnten Sie document.onload verwenden.

Die verschiedenen Javascript-Frameworks (jQuery, Mootools usw.) verwenden jedoch ein benutzerdefiniertes Ereignis "domready", das meiner Meinung nach effektiver sein muss. Wenn Sie mit Javascript entwickeln, würde ich dringend empfehlen, ein Framework zu nutzen, das Ihre Produktivität massiv steigert.

Iain
quelle

1

<script type="text/javascript">
$(window).bind("load", function() { 

// your javascript event here

});
</script>

Erweitern Sie das Snippet

Vô Vị
quelle

4

Diese Antwort hängt von jquery ab

Chiptus

0

Mein Rat verwendet ein asnycAttribut für ein Skript-Tag, mit dem Sie die externen Skripte nach dem Laden der Seite laden können

<script type="text/javascript" src="a.js" async></script>
<script type="text/javascript" src="b.js" async></script>

Kalidass
quelle

7

Laut w3schools , wenn Async vorhanden ist: Das Skript wird asynchron mit dem Rest der Seite ausgeführt (das Skript wird ausgeführt, während die Seite das Parsen fortsetzt) . Vielleicht defermeintest du stattdessen, wie @Daniel Price erwähnt?

jk7

0

Verwenden Sie die Selbstausführungs-Onload-Funktion

window.onload = function (){
    /* statements */
}();

user7087840
quelle

2

onloadMit diesem Ansatz können Sie andere Handler überschreiben . Stattdessen sollten Sie einen Listener hinzufügen.

Leonid Dashko

Wie kann JavaScript nach dem Laden der Seite ausgeführt werden?

Antworten:

Beachten Sie, dass das Laden der Seite mehr als eine Phase umfasst. Übrigens ist dies reines JavaScript

"DOMContentLoaded"

"Belastung"

JavaScript

Gleiches gilt für jQuery: