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.
Antworten:
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!")
})window.onloadaufgerufen, wenn jede Seitenkomponente / Ressource (dh * einschließlich * Bilder). Habe ich recht?
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.
addEventListener("load", function(){… })anstatt die onloadImmobilie zu überschreiben .
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();">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
$.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 });
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
});$(window)lässt mich denken, das wäre jquery - richtig? Oder bin ich mit einer Javascript-Syntax verwirrt? (Ich bin neu bei JS).
$(document).ready();wenn jQuery verfügbar ist?
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
"interactive"ist nicht voll geladen. "complete"ist voll geladen
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
});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.
Und hier ist eine Möglichkeit, dies mit PrototypeJS zu tun :
Event.observe(window, 'load', function(event) {
// Do stuff
});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 .
onloadverwenden müssen $(window).load(jQuery):$(window).load(function() {
//code
});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;
};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!");
});