Does `$(document).ready()` Actually Guarantee CSS is Fully Loaded and Applied?

Does $(document).ready() Guarantee CSS Ready?

Problem:

A script executed using $(document).ready() is causing issues with vertical alignment of block elements. It mysteriously either lags or misaligns the elements.

Question:

Is it possible that executing a script on DOM-ready does not provide all the correct CSS values injected into the DOM?

Answer:

According to the jQuery 1.3 release notes:

"The ready() method no longer tries to make any guarantees about waiting for all stylesheets to be loaded. Instead, all CSS files should be included before the scripts on the page."

This means that it's crucial to include all CSS files in the section using elements before loading any scripts. Failure to do so can lead to unpredictable behavior, especially in WebKit-based browsers like Safari.

Unexpectedly, placing the CSS above the scripts may not fully resolve the issue. CSS downloads asynchronously, allowing JS loading to start and complete even while CSS is being downloaded.

Experiments using Steve Souders' cuzillion.com script reveal that JS execution is sometimes delayed until CSS is loaded, despite waterfall evidence showing JS completion prior to CSS download completion.

However, further testing indicates that the rule of halting JS until earlier defined CSS is not universal. There appears to be an interaction between external JS and CSS loading sequences.

In summary, to prevent inconsistencies and ensure reliable operation of your script, it's best to include all CSS files before any scripts on the page, as recommended in the jQuery documentation.

The above is the detailed content of Does `$(document).ready()` Actually Guarantee CSS is Fully Loaded and Applied?. For more information, please follow other related articles on the PHP Chinese website!