`$(document).ready()` は実際に CSS が完全にロードされ適用されることを保証しますか?

$(document).ready() は CSS の準備が整っていることを保証しますか?

問題:

$ を使用してスクリプトが実行されました(document).ready() により、ブロック要素の垂直方向の配置に問題が発生します。不思議なことに、要素が遅れたり、位置がずれたりします。

質問:

DOM 対応でスクリプトを実行しても、挿入されたすべての正しい CSS 値が提供されない可能性はありますか?のDOM?

答え:

jQuery 1.3 リリース ノートによると:

「ready() メソッドは、すべてのスタイルシートがロードされるのを待機する代わりに、スクリプトの前にすべての CSS ファイルを含める必要があります。 "

これは、すべての CSS ファイルを に含めることが重要であることを意味します。 を使用したセクションスクリプトをロードする前に要素を削除します。これを行わないと、特に Safari などの WebKit ベースのブラウザで予期せぬ動作が発生する可能性があります。

予期せぬことに、スクリプトの上に CSS を配置しても問題が完全に解決されない可能性があります。 CSS は非同期でダウンロードされるため、CSS のダウンロード中であっても JS の読み込みを開始して完了できます。

Steve Souders の cuzillion.com スクリプトを使用した実験により、ウォーターフォールの証拠で JS が示されているにもかかわらず、CSS が読み込まれるまで JS の実行が遅れる場合があることが明らかになりました。 CSS のダウンロードが完了する前に完了します。

ただし、さらなるテストにより、以前に定義された CSS まで JS を停止するルールが示されています。普遍的ではありません。外部 JS と CSS の読み込みシーケンスの間に相互作用があるようです。

要約すると、不一致を防ぎ、スクリプトの信頼性の高い動作を確保するには、推奨されているように、ページ上のスクリプトの前にすべての CSS ファイルを含めるのが最善です。 jQuery ドキュメントを参照してください。

以上が`$(document).ready()` は実際に CSS が完全にロードされ適用されることを保証しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。