JavaScript, die nach dem Laden der Seite ausgeführt

https://stackoverflow.com/questions/807878

03-07-2019
|

Frage

Ich bin ein externes Skript ausgeführt wird, eine <script> innerhalb <head> verwendet wird.

Nun, da das Skript werden ausgeführt, bevor die Seite geladen wird, kann ich nicht den <body> zugreifen, unter anderem. Ich möchte einige JavaScript ausgeführt werden, nachdem das Dokument „geladen“ (HTML vollständig heruntergeladen und in-RAM) gewesen ist. Gibt es Ereignisse, die ich einhaken kann, wenn mein Skript ausgeführt wird, die beim Laden der Seite ausgelöst wird erhalten?

Lösung

Diese Lösungen funktionieren:

<body onload="script();">

oder

document.onload = function ...

oder auch

window.onload = function ...

Beachten Sie, dass die letzte Option ist ein besserer Weg, zu gehen, da es unobstrusive ist und betrachtet mehr Standard .

Andere Tipps

Vernünftige tragbar, nicht-Rahmen Art und Weise Ihr Skript eine Funktion hat, laufen zur Ladezeit eingestellt:

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;
    }
}

Beachten Sie, dass das Laden der Seite mehr als eine Stufe hat. Btw, das ist reine JavaScript

"DOMContentLoaded"

Dieses Ereignis wird ausgelöst, wenn die anfängliches HTML-Dokument vollständig geladen und analysiert worden ist , ohne Stylesheets, Bilder zu warten, und Subframes Laden zu beenden. In diesem Stadium können Sie programmatisch optimieren Laden von Bildern und CSS basierend auf Benutzergerät oder Bandbreite Geschwindigkeit.

Exectues nach DOM geladen wird (vor img und CSS):

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

Hinweis: Synchrone JavaScript Pausen des DOM-Parsing. Wenn Sie das DOM wollen so schnell wie möglich analysiert werden, nachdem der Benutzer die gewünschte Seite können Sie schalten Sie JavaScript asynchron und optimieren Laden von Stylesheets

"load"

Ein ganz anderes Ereignis, Last , sollte nur verwendet werden, eine voll geladen Seite zu erkennen. Es ist ein unglaublich beliebter Fehler Last zu verwenden, wo DOMContentLoaded wäre viel besser geeignet, so wird vorsichtig sein.

Exectues nachdem alles geladen und analysiert:

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

MDN-Ressourcen:

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

MDN Liste aller Ereignisse:

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

können Sie legen ein „onload“ -Attribut im Inneren des Körpers

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

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

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

or 

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

Ich hoffe, dass es Ihre Frage beantworten.

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

Wenn die Skripts innerhalb des <head> des Dokuments geladen werden, dann ist es möglich, den Einsatz der defer Attribut in Script-Tag.

Beispiel:

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

https: //developer.mozilla. org :

defer

Dieses Boolean Attribut wird auf einen Browser, um anzuzeigen, dass das Skript   sollte ausgeführt werden, nachdem das Dokument analysiert wurde, aber bevor   Brennen DOMContentLoaded.

Dieses Attribut muss nicht, wenn die src verwendet werden   Attribut fehlt (das heißt für die Inline-Scripts), in diesem Fall wäre es   keine Wirkung hat.

einen ähnlichen Effekt zu erreichen, für dynamisch eingefügt Skripten   async = false statt. Scripts mit dem defer-Attribute wird ausgeführt, in   die Reihenfolge, in der sie erscheinen im Dokument.

Hier ist ein Skript basierend auf latenten js Laden, nachdem die Seite geladen wird,

<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 den Code in Ihre HTML kurz vor dem </body>-Tag (am unteren Rand der HTML-Datei).

Was ist zu tun?

Dieser Code sagt warten, bis das gesamte Dokument zu laden, dann lädt die externe Datei deferredfunctions.js.

Hier ist ein Beispiel für die oben genannten Code - Aufschieben Rendering von JS

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

Schauen Sie sich Einhaken document.onload oder in jQuery $(document).load(...).

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

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

Beste Methode, empfohlen von Google auch. :)

<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

Arbeits Fiddle

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

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

Wenn Sie mit jQuery,

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

entspricht

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

Siehe Was Ereignis tut JQuery $ function () das Feuer auf?

<body onload="myFunction()">

Dieser Code funktioniert gut.

Aber window.onload Methode hat verschiedene Abhängigkeiten. So kann es nicht die ganze Zeit arbeiten.

Ich finde manchmal auf komplexere Seiten, die nicht alle Elemente durch die Zeit window.onload geladen haben gebrannt. Wenn das der Fall ist, fügen Sie setTimeout vor Ihrer Funktion zu verzögern ist ein Moment. Es ist nicht elegant, aber es ist eine einfache Hack, der gut macht.

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

wird ...

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

Just <body onload="aFunction()"> definieren, die aufgerufen wird, nachdem die Seite geladen wurde. Ihr Code in dem Skript wird als umschlossen von aFunction() { }.

$ (Fenster) .auf ( "load", function () {...});

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

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

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

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

Ist für mich nicht funktioniert, bricht den nächsten Inline-Skript. Ich bin auch jQuery 3.2.1 zusammen mit einigen anderen jQuery Gabeln verwendet wird.

Zu meiner Websites Laden Overlay verstecken, verwende ich die folgenden:

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

Mit der YUI-Bibliothek (Ich liebe es):

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

Tragbare und schön! Wenn Sie jedoch für andere Sachen nicht YUI verwenden (siehe seine doc) Ich würde sagen, dass es sich nicht lohnt, es zu benutzen.

N. B. : Diesen Code zu verwenden, benötigen 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>

Es gibt eine sehr gute Dokumentation, wie man erkennen, ob Dokument mit Javascript oder Jquery geladen ist.

Mit dem nativen Javascript dies erreicht werden kann

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 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;
}

Mit JQuery Um nur zu überprüfen, ob DOM ist bereit,

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

Um zu überprüfen, ob alle Ressourcen werden geladen Verwendung window.load

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

Verwenden Sie diesen Code mit jQuery-Bibliothek, das funktionieren würde völlig in Ordnung.

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

  // your javascript event

});

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

Der verschiedene JavaScript-Frameworks hwoever (jQuery, Mootools, etc.) verwenden, um ein benutzerdefiniertes Ereignis 'domready', das ich denke, muss effektiver sein. Wenn Sie mit Javascript entwickelst, würde ich sehr empfehlen die Nutzung einen Rahmen, sie massiv die Produktivität erhöhen.

Mein Rat Verwendung asnyc Attribut für Script-Tag, das ist Ihnen helfen, die externe Skripte nach Laden der Seite zu laden

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

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

// your javascript event here

});
</script>

umluft Ausführung onload Funktion

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

Lizenziert unter: CC-BY-SA mit Zuschreibung

Nicht verbunden mit StackOverflow