Was ist der Unterschied zwischen $ (Fenster) .load und $ (Dokument) .ready?

68

Ich hatte in letzter Zeit ein Problem mit meinem JavaScript-CODE und nahm einen Teil meines Codes aus meinem heraus $(document).ready()und legte ihn in $(window).load()das Problem.

Jetzt verstehe ich, dass window.loaddas gleich danach abgefeuert wird document.ready, aber warum ist es nicht bereit danach document.ready, das ist danach window.load()?

javascript jquery document-ready Mark McCook
quelle
2
Sie können die Dokumentation unter folgender Adresse
epascarello
Ich schrieb einen kleinen Artikel, der eine gute Referenz enthält, um darüber zu erzählen: amrelgarhy.com/blog/how-to-tell-when-images-have-loaded
Amr Elgarhy

Antworten:

74

loadwird aufgerufen, wenn alle Assets einschließlich der Bilder geladen sind. readywird ausgelöst, wenn das DOM für die Interaktion bereit ist.

Vom MDC aus window.onload :

Das Ladeereignis wird am Ende des Dokumentladevorgangs ausgelöst. Zu diesem Zeitpunkt befinden sich alle Objekte im Dokument im DOM, und alle Bilder und Unterrahmen wurden vollständig geladen.

Aus der jQuery-API-Dokumentation .ready (Handler) :

Während JavaScript das Ladeereignis zum Ausführen von Code beim Rendern einer Seite bereitstellt, wird dieses Ereignis erst ausgelöst, wenn alle Elemente wie Bilder vollständig empfangen wurden. In den meisten Fällen kann das Skript ausgeführt werden, sobald die DOM-Hierarchie vollständig erstellt wurde. Der an .ready () übergebene Handler wird garantiert ausgeführt, nachdem das DOM bereit ist. Daher ist dies normalerweise der beste Ort, um alle anderen Ereignishandler anzuhängen und anderen jQuery-Code auszuführen. Wenn Sie Skripte verwenden, die auf dem Wert der CSS-Stileigenschaften basieren, ist es wichtig, auf externe Stylesheets zu verweisen oder Stilelemente einzubetten, bevor Sie auf die Skripte verweisen.

Martin Jespersen
quelle
"Es ist wichtig, auf externe Stylesheets zu verweisen oder Stilelemente einzubetten, bevor auf die Skripte verwiesen wird." Dies steht im Gegensatz zu der Definition von DOMContentLoaded, die von jQuery.ready () verwendet wird: "Das DOMContentLoaded-Ereignis wird ausgelöst, wenn das ursprüngliche HTML-Dokument vollständig geladen und analysiert wurde, ohne darauf zu warten, dass Stylesheets, Bilder und Unterrahmen vollständig geladen werden." "vor" in einer asynchronen Umgebung ist ein kniffliges Wort. Gibt es eine Möglichkeit, um sicherzustellen, dass ein Stylesheet vor .ready () geladen wird? Garantiert dies das Einfügen des "Link" -Tags in den "Kopf"?
Spekary
26

$(document).ready() bedeutet, dass das DOM Ihrer Seite zur Bearbeitung bereit ist.

window.load() wird ausgelöst, wenn die gesamte Seite (einschließlich Komponenten wie CSS und Bilddateien) vollständig geladen wurde.

Was versuchst du zu erreichen?

Mario Fink
quelle
2
Ich habe versucht, Bilder zu manipulieren, aber als ich dies auf Dokument fertig machte, bekam ich Fehler, aber dann sah ich einen Ausschnitt, der etwas Ähnliches tat, was ich wollte, aber der einzige Unterschied im Code war, dass sie $ (window) .load verwendeten und ich benutzte $ (Dokument) .ready ()
Mark McCook
Ja, mit $ (Fenster) .load ist die richtige Wahl. Es erkennt, ob Ihr Bild erfolgreich geladen wurde. Sie können einfach $ (Fenster) .load unter $ (Dokument) .ready pas. So wäre es wie $ (Dokument) .ready ($ (Fenster) .load () {})
Faris Rayhan
8 
$(document).ready(function(){
//code here
});

Der obige Code wird fast jedes Mal verwendet, wenn wir mit arbeiten jQuery .

Dieser Code wird verwendet, wenn wir unsere jQueryCodes initialisieren möchten, nachdem das DOM bereit ist.

$(window).load()

Manchmal möchten Sie Bilder bearbeiten. Sie möchten beispielsweise ein Bild vertikal und horizontal ausrichten und müssen dazu die Breite und Höhe des Bildes ermitteln. Mit können $(document).ready()Sie dies nicht tun, wenn der Besucher das Bild noch nicht geladen hat. In diesem Fall müssen Sie die jqueryAusrichtungsfunktion initialisieren, wenn das Bild vollständig geladen ist . Dort setzen wir ein$(window).load()

SimonGates
quelle
6

$(document).readyist ein jQueryEreignis, das ausgelöst wird, wenn DOM geladen wird. Es wird also ausgelöst, wenn die Dokumentstruktur bereit ist.

$(window).load Das Ereignis wird ausgelöst, nachdem der gesamte Inhalt (einschließlich CSS, Bilder usw.) geladen wurde.

Das ist ein großer Unterschied.

Bharat Chodvadiya
quelle
4

$(document).ready() ist DOM einwickeln <body>...</body>

$(window).load() ist Papa von Document Wrap alle DOM in <html>...</html>

Lassen Sie uns in Ihrem Fall die Renderverarbeitung speichern.

xicooc
quelle
2

In einfachen Worten, window.loadwird aufgerufen, wenn der gesamte Inhalt des Fensters geladen ist, während document.readyaufgerufen wird, wenn das DOM geladen ist und die Dokumentstruktur bereit ist.

Yamini Upadhyay
quelle
1

Der Ladezustand ist der Zustand, in dem das Fensterobjekt erstellt und alle erforderlichen Komponenten einschließlich des DOM in den Speicher geladen wurden, jedoch nicht an die Rendering-Engine übergeben wurden, um dasselbe in der Seite zu rendern.

Der Bereitschaftszustand stellt andererseits sicher, dass die DOM-Elemente, Ereignisse und andere abhängige Komponenten an die Rendering-Engine weitergeleitet, auf Seite gerendert und für die Interaktion und Bearbeitung bereit sind.

asmitB
quelle
1

  1. $ (Dokument) .ready ist im Vergleich $ (Fenster) .load Event schnell.

  2. $ (Dokument) .ready ist Feuer, wenn Dom geladen ist, aber $ (Fenster) .load Ereignis Feuer, wenn Dom, CSS und Bilder vollständig geladen sind.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>   
  <script  src="https://code.jquery.com/jquery-1.12.4.js" ></script>
    <script> 
        $(window).load(function () {          
            var img = $('#img1');
      alert( "Image Height = " + img.height() + "<br>Image Width = " + img.width());          
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">     
    <div>
        <img id="img1" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTozkxoNSH8739juRXJJX5JxREAB6I30bFyexPoCdRVa2fKfH2d" />
    </div>
    </form>
</body>
</html>
Erweitern Sie das Snippet

Ankit Sahu
quelle
-1

$(document).readyist ein jQuery-Ereignis. Es wird ausgelöst, sobald das DOM geladen und bereit ist, per Skript bearbeitet zu werden. Dies ist der früheste Punkt im Seitenladevorgang, an dem das Skript sicher auf Elemente im HTML-DOM der Seite zugreifen kann. Dieses Ereignis wird ausgelöst, bevor alle Bilder, CSS usw. vollständig geladen sind.

window.load() wird ausgelöst, wenn die gesamte Seite (einschließlich Komponenten wie CSS und Bilddateien) vollständig geladen wurde.

Seema Gupta
quelle