Sind CSS-Werte verfügbar, wenn $(document).ready() ausgeführt wird?
Frage:
Warum funktioniert a script执行于$(document).ready auf einer Seite mit dynamischer Inhaltsausrichtung kommt es manchmal zu Verzögerungen oder Fehlfunktion?
Antwort:
Laut den Versionshinweisen und der Dokumentation von jQuery wartet $(document).ready() möglicherweise nicht darauf, dass CSS-Werte vollständig in das eingefügt werden DOM. Daher wird empfohlen, alle CSS-Dateien in den
einzubinden. vor allen Skriptverweisen.
Erklärung:
-
Asynchrones CSS-Laden: CSS-Dateien werden asynchron geladen, was bedeutet, dass JavaScript vor CSS ausgeführt werden kann Das Rendern ist abgeschlossen.
-
CSS-Abhängigkeit von JS Berechnungen: In einigen Fällen basieren JavaScript-Berechnungen auf CSS-Werten, um Elementabmessungen und -positionierung zu bestimmen, was zu Ungenauigkeiten führen kann, wenn CSS-Werte noch nicht verfügbar sind.
-
Browserspezifisch Verhalten: Das in der gestellten Frage beobachtete Verhalten hängt möglicherweise mit bestimmten Browserverhalten zusammen, z als:
-
Internet Explorer: Hält manchmal die JS-Ausführung an, bis externes CSS geladen wird, insbesondere wenn CSS über JS auf der Seite platziert wird.
-
Andere Browser: Stoppt die JS-Ausführung möglicherweise nicht immer, auch wenn CSS nicht vollständig ist geladen.
Lösung:
Um sicherzustellen, dass CSS-Werte verfügbar sind, wenn $(document).ready() ausgeführt wird:
- Fügen Sie immer CSS-Dateien vor JavaScript-Referenzen im ein. des HTML-Dokuments.
- Wenn möglich, ziehen Sie in Betracht, das Skript an den unteren Rand der Seite zu verschieben, nachdem das gesamte CSS und der Inhalt geladen wurden.
Zusätzliche Hinweise:
- In den meisten Fällen werden durch die Platzierung von CSS über JS Leistungsprobleme im Zusammenhang mit der CSS-Abhängigkeit von JS behoben Berechnungen.
- Es können jedoch weiterhin komplexe browserspezifische Verhaltensweisen im Zusammenhang mit dem asynchronen Laden von Ressourcen und der Skriptausführung auftreten.
Das obige ist der detaillierte Inhalt vonHat $(document).ready() immer Zugriff auf endgültige CSS-Werte?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!