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()?
Antworten:
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.
$(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?
$(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()
$(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.
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.
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.
$ (Dokument) .ready ist im Vergleich $ (Fenster) .load Event schnell.
$ (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>$(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.