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, wenn die Seite vollständig geladen ist.

Dies kann für Sie funktionieren:

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

oder wenn Sie sich mit jquery wohl fühlen,

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

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

Wie Jeffrey Sweeney und J Torres vorgeschlagen haben, ist es meiner Meinung nach besser, eine setTimeoutFunktion zu haben , bevor die Funktion wie folgt ausgelöst wird:

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

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 = ...

Wenn Sie jQuery verwenden können, sehen Sie sich load an . Sie können dann festlegen, dass Ihre Funktion ausgeführt wird, nachdem Ihr Element vollständig geladen wurde.

Betrachten Sie beispielsweise eine Seite mit einem einfachen Bild:

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

Der Ereignishandler kann an das Bild gebunden werden:

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

Wenn Sie zum Laden alle Elemente im aktuellen Fenster benötigen, können Sie verwenden

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

Ich bin ein bisschen verwirrt darüber, was Sie unter abgeschlossenem Seitenladen, "DOM Load" oder "Content Load" verstehen. In einer HTML-Seite kann das Laden eines Ereignisses nach einem Ereignis vom Typ zwei ausgelöst werden.

1. DOM-Laden: Damit wird sichergestellt, dass der gesamte geladene DOM-Baum von Anfang bis Ende geladen wird. Stellen Sie jedoch nicht sicher, dass der Referenzinhalt geladen wird. Angenommen, Sie haben Bilder über die imgTags hinzugefügt , sodass dieses Ereignis sicherstellt, dass alle imggeladenen, aber keine Bilder ordnungsgemäß geladen wurden 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 Laden von DOM und Inhalten: Zeigt auch das Laden von DOM und Inhalten an. Dadurch wird sichergestellt, dass nicht nur imgTags, sondern auch alle Bilder oder anderen relativen 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')
   })

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

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

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

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

Alternativ können Sie es unten versuchen.

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

Dies funktioniert in jedem Fall. Dies wird nur ausgelöst, wenn die gesamte Seite geladen ist.

Soweit ich weiß, ist es am besten, wenn Sie es verwenden

window.addEventListener('load', function() {
    console.log('All assets loaded')
});

Die Antwort Nr. 1 bei der Verwendung des DOMContentLoadedEreignisses ist ein Rückschritt, da das DOM geladen wird, bevor alle Assets geladen werden.

Andere Antworten empfehlen, setTimeoutdie ich stark ablehnen würde, da sie völlig subjektiv für die Geräteleistung und die Netzwerkverbindungsgeschwindigkeit des Clients sind. Wenn sich jemand in einem langsamen Netzwerk befindet und / oder eine langsame CPU hat, kann das Laden einer Seite einige bis Dutzende Sekunden dauern, sodass Sie nicht vorhersagen können, wie viel Zeit setTimeoutbenötigt wird.

Was readystatechange, es feuert , wenn readyStateÄnderungen, die nach MDN noch vor dem seinen loadFall.

Komplett

Der Status zeigt an, dass das Ladeereignis ausgelöst wird.

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

Wenn Sie keine JS-Frameworks verwenden, ist dieses Projekt der beste Weg, um den dom-fähigen Status mit Cross-Browser-Kompatibilität zu erhalten

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

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

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

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

Der Plan: Auf meiner Seite steht eine Tabelle. Ich schreibe die Seite mit der Tabelle in den Browser und sortiere sie dann mit JS. Der Benutzer kann darauf zurückgreifen, indem er auf Spaltenüberschriften klickt.

Nachdem die Tabelle einen </tbody>Befehl beendet und der Text beendet hat, rufe ich in der folgenden Zeile das Sortier-JS auf, um die Tabelle nach Spalte 3 zu sortieren. Ich habe das Sortierskript aus dem Web entfernt, damit es hier nicht reproduziert wird. Zumindest für das nächste Jahr können Sie dies in Betrieb sehen, einschließlich des JS unter static29.ILikeTheInternet.com. Klicken Sie unten auf der Seite auf "hier". Daraufhin wird eine weitere Seite mit der Tabelle und den Skripten angezeigt. Sie können sehen, dass die Daten gespeichert 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

Versuchen Sie diese jQuery :

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

Rufen Sie eine Funktion auf, nachdem das Zeitlimit für das vollständige Laden der Seite vollständig eingestellt 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);

Ich neige dazu, das folgende Muster zu verwenden, um zu überprüfen, ob das Dokument vollständig geladen ist. Die Funktion gibt ein Versprechen zurück (wenn Sie IE unterstützen müssen, fügen Sie die Polyfüllung hinzu ), das aufgelöst wird, sobald das Laden des Dokuments abgeschlossen ist. Es wird setIntervaldarunter verwendet, da eine ähnliche Implementierung mit setTimeoutzu einem sehr tiefen Stapel führen kann.

function getDocReadyPromise()
{
  function promiseDocReady(resolve)
  {
    function checkDocReady()
    {
      if (document.readyState === "complete")
      {
        clearInterval(intervalDocReady);
        resolve();
      }
    }
    var intervalDocReady = setInterval(checkDocReady, 10);
  }
  return new Promise(promiseDocReady);
}

Wenn Sie den IE nicht unterstützen müssen:

const getDocReadyPromise = () =>
{
  const promiseDocReady = (resolve) =>
  {
    const checkDocReady = () =>
      ((document.readyState === "complete") && (clearInterval(intervalDocReady) || resolve()));
    let intervalDocReady = setInterval(checkDocReady, 10);
  }
  return new Promise(promiseDocReady);
}

Mit dieser Funktion können Sie Folgendes tun:

getDocReadyPromise().then(whatIveBeenWaitingToDo);

Ich verwende Webkomponenten, damit das für mich funktioniert:

document.addEventListener('WebComponentsReady', function() {
       document.querySelector('your-element').show();
});

Fügen Sie Ihr Skript nach Abschluss des Body-Tags ein ... es funktioniert ...