Wie mache ich einen Abfragecode nach dem Laden der Seite?

84

Wenn Sie möchten, dass ein Ereignis auf Ihrer Seite funktioniert, sollten Sie es in der Funktion $ (document) .ready () aufrufen. Alles darin wird geladen, sobald das DOM geladen ist und bevor der Seiteninhalt geladen wird.

Ich möchte Javascript-Code erst nach dem Laden des Seiteninhalts erstellen. Wie kann ich das tun?

Alex
quelle

Antworten:

167

Verwenden Sie loadanstelle von ready:

$(document).load(function () {
 // code here
});

Update Sie müssen es .on()seit jQuery 1.8 verwenden. ( http://api.jquery.com/on/ )

$(window).on('load', function() {
 // code here
});

Aus dieser Antwort :

Laut http://blog.jquery.com/2016/06/09/jquery-3-0-final-released/ :

Veraltete Ereignis-Aliase wurden entfernt

.load, .unloadUnd .error, als veraltet , da jQuery 1.8, sind nicht mehr. Verwenden Sie .on()diese Option , um Listener zu registrieren.

https://github.com/jquery/jquery/issues/2286

Matt
quelle
1
Aus dem Kommentar zu dieser Antwort: stackoverflow.com/a/37817516/957246 $ (window) .on ("load", function () {// code here}); ..wenn ".load" veraltet ist.
trapper_hag
mit .on () ist es so offensichtlich .. aber ich habe 1 Stunde damit verbracht, meinen Kopf gegen die Wand zu stoßen, bevor ich das gefunden habe .. danke ..!
Ghuroo
2
Achten Sie auf den Fehler, $(document).on('load', ...es zu versuchen$(window).on('load',...
Benutzer
29

Folgen

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

kann ersetzt werden

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

Es gibt noch einen Weg, den ich benutze, um die Ladezeit der Seite zu erhöhen.

$(document).ready(function() { 
  $(window).load(function() { 
     //insert all your ajax callback code here. 
     //Which will run only after page is fully loaded in background.
  });
});
Kshitiz
quelle
2
ein Load Handler im Ready Handler? Das ist Wahnsinn. Sie müssen das Dokument nicht bereit haben, da zu diesem Zeitpunkt ein Fenster vorhanden ist und Sie einen Handler ohne dieses Fenster anhängen können.
Bangalore
18

niemand hat das erwähnt

$(function() {
    // place your code
});

Das ist eine Kurzfunktion von

$(document).ready(function() { .. });
Zoltán Süle
quelle
16

Bearbeiten: Dieser Code wartet, bis alle Inhalte (Bilder und Skripte) vollständig geladen und im Browser gerendert sind.

Ich hatte dieses Problem, bei dem $(window).on('load',function(){ ... })mein Code seit dem Javascript zu schnell ausgelöst wurde mir verwendete zum Formatieren und Ausblenden von Elementen diente. Die Elemente wurden zu früh ausgeblendet und mit einer Höhe von 0 belassen.

Ich benutze jetzt $(window).on('pageshow',function(){ //code here });und es feuert zu der Zeit, die ich brauche.

Boyd Cyr
quelle
1
Dieser hat mir auch geholfen, ich wollte genau etwas Code ausführen, nachdem die jQuery Mobile-Seite angezeigt wurde. Vielen Dank. @ Floyd Cyr
Codedudey
Ich wollte nur hinzufügen, wie viel hilfreicher dieser Code im Vergleich zur akzeptierten Antwort ist. Danke vielmals.
Countzero
10

Auf diese Weise können Sie vermeiden, in '$' undefiniert zu werden

window.addEventListener("DOMContentLoaded", function(){
    // Your code
});

BEARBEITEN : Die Verwendung von 'DOMContentLoaded' ist schneller als nur 'Laden', da die Ladeseite vollständig geladen ist, einschließlich Imgs ... während DomContentLoaded nur auf die Struktur wartet

Diego Vinícius
quelle
7

Ich suche das gleiche Problem und hier ist, was mir hilft. Hier ist die jQuery-Version 3.1.0 und das Ladeereignis ist für die Verwendung seit jQuery-Version 1.8 veraltet . Das Ladeereignis wird aus jQuery 3.0 entfernt. Stattdessen können Sie die Methode on verwenden und das JavaScript-Ladeereignis binden:

$(window).on('load', function () {
  alert("Window Loaded");
});
Ankit Suthar
quelle
5

Schreiben Sie den Code, den Sie ausführen möchten. Wenn Ihr Dokument fertig ist, wird dies ausgeführt.

$(document).ready(function() { 

});
Marc-André Denault
quelle