wake-up-neo.com

funktion nach dem vollständigen Laden der Seite ausführen

Ich verwende folgenden Code, um einige Anweisungen nach dem Laden der Seite auszuführen.

 <script type="text/javascript">
    window.onload = function () { 

        newInvite();
        document.ag.src="b.jpg";
    }
</script>

Dieser Code funktioniert jedoch nicht ordnungsgemäß. Die Funktion wird auch dann aufgerufen, wenn einige Bilder oder Elemente geladen werden. Ich möchte die Funktion aufrufen, in der die Seite vollständig geladen ist.

76
Neeraj Kumar

das kann für Sie funktionieren:

document.addEventListener('DOMContentLoaded', function() {
   // your code here
}, false);

oder wenn Sie mit jquery zufrieden sind,

$(document).ready(function(){
// your code
});

$(document).ready() wird bei DOMContentLoaded ausgelöst, dieses Ereignis wird jedoch nicht konsistent unter Browsern ausgelöst. Aus diesem Grund wird jQuery höchstwahrscheinlich einige Problemumgehungen implementieren, um alle Browser zu unterstützen. Dies macht es sehr schwierig, das Verhalten mit einfachem Javascript "genau" zu simulieren (natürlich nicht unmöglich).

wie Jeffrey Sweeney und J Torres vorgeschlagen haben, denke ich, dass es besser ist, eine setTimeout-Funktion zu haben, bevor die Funktion wie folgt ausgelöst wird:

setTimeout(function(){
 //your code here
}, 3000);
123
Shreedhar

Wenn Sie jQuery verwenden können, schauen Sie nach load . Sie können dann Ihre Funktion so einstellen, dass sie ausgeführt wird, nachdem das Laden des Elements abgeschlossen ist.

Betrachten Sie beispielsweise eine Seite mit einem einfachen Bild:

<img src="book.png" alt="Book" id="book" />

Der Event-Handler kann an das Bild gebunden sein:

$('#book').load(function() {
  // Handler for .load() called.
});

Wenn Sie alle Elemente des aktuellen Fensters laden möchten, können Sie verwenden 

$(window).load(function () {
  // run code
});
29
Jaime Torres

A) mit einfaches Javascript :

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

    if (event.target.readyState === "interactive") {      //same as:  document.addEventListener("DOMContentLoaded"...   // same as  jQuery.ready
        alert("All HTML DOM elements are accessible");
    }

    if (event.target.readyState === "complete") {
        alert("Now external resources are loaded too, like css,src etc... ");
    }

});

B) mit jQuery :

$(function(){
    alert("hello");
});

C) Verwenden Sie nicht die untenstehende Methode (die =-Zeichen verwendet) :

document.onreadystatechange = function(){ alert("Hi"); }

weil es andere gleichartige Deklaration überschreibt.

19
T.Todua

Ich bin etwas verwirrt, was Sie unter "Laden der Seite", "DOM Load" oder "Content Load" verstehen. In einer HTML-Seite kann das Laden eines Ereignisses nach zwei Ereignissen ausgelöst werden.

  1. DOM load: Damit wird sichergestellt, dass der gesamte DOM-Baum geladen endet. Laden Sie jedoch nicht den Referenzinhalt. Angenommen, Sie haben Bilder mit den img-Tags hinzugefügt, sodass dieses Ereignis dafür sorgt, dass alle img geladen werden, nicht aber die Bilder ordnungsgemäß geladen werden oder nicht. Um dieses Ereignis zu erhalten, sollten Sie folgendermaßen schreiben:

    document.addEventListener('DOMContentLoaded', function() {
       // your code here
    }, false);
    

    Oder mit jQuery: 

    $(document).ready(function(){
    // your code
    });
    
  2. Nach dem DOM und dem Laden von Inhalten: Zeigt auch das Laden von DOM und Inhalt an. Es wird sichergestellt, dass nicht nur das Tag img, sondern auch alle Bilder oder andere relative Inhalte geladen werden. Um dieses Ereignis zu erhalten, sollten Sie folgendermaßen schreiben:

    window.addEventListener('load', function() {...})
    

    Oder mit jQuery:

    $(window).on('load', function() {
     console.log('All assets are loaded')
    })
    
15
Hanif

Wenn Sie eine js-Funktion in Ihrer HTML-Seite aufrufen möchten, verwenden Sie das onload-Ereignis. Das Onload-Ereignis tritt ein, wenn der Benutzeragent das Laden eines Fensters oder aller Frames in einem FRAMESET abgeschlossen hat. Dieses Attribut kann mit den Elementen BODY und FRAMESET verwendet werden.

<body onload="callFunction();">
....
</body>
9
user2361682

Auf diese Weise können Sie beide Fälle behandeln - wenn die Seite bereits geladen ist oder nicht:

document.onreadystatechange = function(){
    if (document.readyState === "complete") {
       myFunction();
    }
    else {
       window.onload = function () {
          myFunction();
       };
    };
}
5
tsveti_iko

Wenn Sie jQuery bereits verwenden, können Sie Folgendes versuchen: 

$(window).bind("load", function() {
   // code here
});
1
santosh

Ich kann Ihnen sagen, dass die beste Antwort, die ich gefunden habe, ist, ein "Treiber" -Skript direkt nach dem </body>-Befehl einzufügen. Es ist die einfachste und wahrscheinlich universellere Lösung als einige der oben genannten Lösungen.

Der Plan: Auf meiner Seite ist eine Tabelle. Ich schreibe die Seite mit der Tabelle in den Browser und sortiere sie dann mit JS. Der Benutzer kann es durch Klicken auf die Spaltenüberschriften ändern.

Nachdem die Tabelle mit einem </tbody>-Befehl beendet und der Rumpf beendet ist, verwende ich die folgende Zeile, um die Sortier-JS aufzurufen, um die Tabelle nach Spalte 3 zu sortieren. Ich habe das Sortierskript aus dem Web geholt, sodass es hier nicht reproduziert wird. Für mindestens das nächste Jahr können Sie dies in Betrieb sehen, einschließlich der JS, unter static29.ILikeTheInternet.com. Klicken Sie unten auf der Seite auf "hier". Daraufhin wird eine weitere Seite mit der Tabelle und den Skripts angezeigt. Sie können sehen, wie die Daten aufgespielt und dann schnell sortiert werden. Ich muss es etwas beschleunigen, aber die Grundlagen sind jetzt da.

</tbody></body><script type='text/javascript'>sortNum(3);</script></html>

MakerMikey

1
Micheal Morrow

Wenn Sie keine JS-Frameworks verwenden, ist dieses Projekt der beste Weg, um den dom-ready-Status zu erreichen, und zwar mit Cross-Browser-Kompatibilität

https://github.com/ded/domready/blob/master/ready.js

1
Olivier Refalo

eine Funktion aufrufen, nachdem der eingestellte Timeout der Seite vollständig geladen wurde

setTimeout(function() {
   var val = $('.GridStyle tr:nth-child(2) td:nth-child(4)').text();
	for(var i, j = 0; i = ddl2.options[j]; j++) {
		if(i.text == val) {      
			ddl2.selectedIndex = i.index;
			break;
		}
	} 
}, 1000);

0
M.H
window.onload = () => {
  // run in onload
  setTimeout(() => {
    // onload finished.
    // and execute some code here like stat performance.
  }, 10)
}
0
tvrcgo

Probieren Sie diese jQuery :

$(function() {
 // Handler for .ready() called.
});
0
djserva

Alternativ können Sie es unten versuchen.

$(window).bind("load", function() { 
// code here });

Das funktioniert in allen Fällen. Dies wird nur ausgelöst, wenn die gesamte Seite geladen ist.

0
Ganesh Ram Ravi