Ist $ (document) .ready () auch CSS ready?
Habe ich ein Skript ausführen, die auf $(document).ready (), die eigentlich vertikal ausrichten block-element in meinem layout. 90% der Zeit, funktioniert es ohne Problem. Doch für das extra-10 - % eines von zwei Dingen geschieht:
-
Gibt es eine offensichtliche Verzögerung in der Zeit, die es braucht, um die Zentrierung und die block-Elemente springen in position. Dies könnte einfach sein, die performance bezogen - als die Seitengröße ist oft groß und es gibt eine ganze Menge von javascript, das ausgeführt wird, auf einmal.
-
Die Zentrierung wird völlig Durcheinander, und das block-element wird entweder nach unten gedrückt zu weit oder nicht weit genug. Es scheint, als ob es versucht, die Berechnung der Höhe, aber war immer unsachgemäße Messungen.
Gibt es einen Grund, warum ein Skript ausführt, das auf DOM-ready würde nicht alle haben die richtige CSS-Werte Injektion in den DOM noch? (die CSS ist in der <head>
über eine <link>
).
Auch hier ist das Skript, das den Fehler verursacht hat (ja, es ist schon gerade von hier):
(function ($) {
//VERTICALLY ALIGN FUNCTION
$.fn.vAlign = function() {
return this.each(function(i) {
var ah = $(this).height();
var ph = $(this).parent().height();
var mh = (ph - ah) / 2;
$(this).css('margin-top', mh);
});
};
})(jQuery);
Dank.
InformationsquelleAutor der Frage Bryan M. | 2009-08-24
Du musst angemeldet sein, um einen Kommentar abzugeben.
Aus der 1.3 release notes:
Aus der ready(fn) - Dokumentation:
Beachten Sie, dass die oben nicht auch tatsächlich über den rendering der CSS, so können Sie noch sehen Sie den Bildschirm ändern, wenn
ready()
kicks in. Es sollte aber sparen Sie von Problemen.Eigentlich finde ich es ein bisschen seltsam, dass gerade dabei, das CSS oben, JS lösen alle Probleme. Die CSS-Datei wird asynchron geladen, so JS laden kann beginnen und fertig während die CSS wird immer noch heruntergeladen werden. Also, wenn das oben genannte ist eine Lösung, dann Ausführung beliebigen JS-code wird dann angehalten, bis alle früheren Anforderungen abgeschlossen haben?
Ich habe einige Tests, und in der Tat, manchmal JS verzögert wird, bis die CSS-Datei wird geladen. Ich weiß nicht, warum, weil der Wasserfall zeigt, dass das JS geladen wurde, lange bevor das herunterladen der CSS abgeschlossen hat.
Siehe JS Bin für einige HTML und seine Ergebnisse (dieser hat eine Verzögerung von 10 Sekunden), und siehe webpagetest.org für seine Wasserfall-Ergebnisse. Diese verwendet einige script von Steve Souders' cuzillion.com zu imitieren langsame Reaktionen. In der Wasserfall, der Verweis auf
resource.cgi
ist die CSS. Also, im Internet Explorer, die erste externe JS beginnt zu laden, direkt nach der CSS angefordert wurde (aber das CSS noch 10 Sekunden zu beenden). Aber der zweite<script>
tag nicht ausgeführt, bis das CSS geladen wurde:Ein weiterer test mit einem zweiten externen JS nach dem aufstehen jQuery, zeigtdass der download der zweiten JS wird erst gestartet, wenn die CSS geladen wurde. Hier ist der erste Hinweis
resource.cgi
ist die CSS, der zweite das JS:Verschieben Sie das stylesheet unten allen JS in der Tat zeigt sich, dass die JS (einschließlich der
ready
Funktion) läuft viel früher an, aber auch dann die jQuery-Klasse angewendet-das ist noch unbekannt, wenn das JS ausgeführt wird-wird verwendet, richtig in meinem quick-tests in Safari und Firefox. Aber es macht Sinn, dass Dinge wie$(this).height()
ergeben sich falsche Werte bei Zeit.Jedoch zusätzliche Tests zeigt, dass es ist nicht eine Allgemeine Regel, dass JS angehalten wird, bis die zuvor definierte CSS geladen wird. Es scheint eine Kombination mit der Verwendung von externen JS und CSS. Ich weiß nicht, wie das funktioniert.
Letzte Hinweise: JS Bin-gehören Google Analytics in jedem script beim ausführen der nackten URL (wie jsbin.com/aqenodie Testergebnisse tatsächlich geändert von JS Bin... Es scheint, dass die Registerkarte "Ausgabe" auf " URL Bearbeiten wie jsbin.com/aqeno/edit beinhaltet nicht die zusätzlichen Google-Analytics Dinge, und sicherlich ergibt unterschiedliche Ergebnisse, aber die URL ist schwer zu testen mit webpagetest.org. Der Verweis auf Stylesheets Block Downloads in Firefox und die Ausführung von JavaScript im IEwie strager ist ein guter start für ein besseres Verständnis, aber ich habe viele Fragen... beachten Sie Auch Steve Souders' IE8 Parallel-Skript Laden um die Dinge noch komplizierter. (Die Wasserfälle sind die oben erstellt mit IE7.)
Vielleicht sollte man einfach glauben, dass die release notes und Dokumentation...
InformationsquelleAutor der Antwort Arjan
CSS/JavaScript/JQuery-Bestellung bei mir nicht funktioniert, aber die folgende funktioniert:
InformationsquelleAutor der Antwort Martin Dvorak
Die DOM-ready feuert, wenn alle DOM-Knoten verfügbar sind. Es hat nichts zu tun mit CSS. Versuchen Sie die Positionierung der Stil vor oder versuchen Sie es anders.
InformationsquelleAutor der Antwort fphilipe
Zu den besten meines Wissens, das ready-Ereignis wird ausgelöst, wenn der DOM geladen ist - was bedeutet, dass alle Anforderungen blockiert (also JS) geladen haben und der DOM-Baum ist vollständig graphisch dargestellt. Der Zustand in IE stützt sich auf eine langsamere event trigger ("Dokument".readyState änderung vs DOMContentLoaded) als die meisten anderen Browser so das timing ist browser-abhängig auch.
Die Existenz von nicht-blockierende Anfragen (wie CSS und Bilder) ist komplett asynchron und nicht in den Status bereit. Wenn Sie in einer position, wo Sie brauchen solche Ressourcen, die Sie benötigen zu hängen, die gute alte onload-Ereignis.
InformationsquelleAutor der Antwort annakata
In molily tests (2010),
<script src>
)Alle modernen Browser unterstützen nun DOMContentLoaded (2017), so dass Sie haben können standardisierte dieses Verhalten jetzt.
InformationsquelleAutor der Antwort sam