Is $(Document).Ready() Also CSS Ready

Is $(document).ready() also CSS ready?

From the 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. More Information

From the ready(fn) documentation:

Note: Please make sure that all stylesheets are included before your scripts (especially those that call the ready function). Doing so will make sure that all element properties are correctly defined before jQuery code begins executing. Failure to do this will cause sporadic problems, especially on WebKit-based browsers such as Safari.

Note that the above is not even about actually rendering the CSS, so you may still see the screen change when ready() kicks in. But it should save you from problems.

Actually, I find it a bit strange that just putting the CSS above the JS will solve all issues. The CSS is loaded asynchronously, so JS loading can start and finish while the CSS is still being downloaded. So if the above is a solution, then executing any JS code is then halted until all earlier requests have completed?

I did some testing, and indeed, sometimes JS is delayed until the CSS is loaded. I don't know why, because the waterfall shows that the JS has completed loading long before downloading the CSS has finished.

See JS Bin for some HTML and its results (this has a 10 second delay), and see webpagetest.org for its waterfall results. This uses some script from Steve Souders' cuzillion.com to mimic slow responses. In the waterfall, the reference to resource.cgi is the CSS. So, in Internet Explorer, the first external JS starts to load right after the CSS was requested (but that CSS will take another 10 seconds to finish). But the second <script> tag is not executed until the CSS has finished loading as well:

<link rel="stylesheet" type="text/css" href=".../a script that delays.cgi" />

<script type="text/javascript" src=".../jquery.min.js"></script> 

<script type="text/javascript"> 
  alert("start after the CSS has fully loaded"); 
  $(document).ready(function() { 
    $("p").addClass("sleepcgi"); 
    alert("ready"); 
  });         
</script> 

Another test with a second external JS after getting jQuery, shows that the download of the second JS is not started until the CSS has loaded. Here, the first reference to resource.cgi is the CSS, the second the JS:

Moving the stylesheet below all JS indeed shows that the JS (including the ready function) runs much earlier, but even then the jQuery-applied class --which is yet unknown when the JS runs-- is used correctly in my quick tests in Safari and Firefox. But it makes sense that things like $(this).height() will yield wrong values at that time.

However, additional testing shows that it is not a generic rule that JS is halted until earlier defined CSS is loaded. There seems to be some combination with using external JS and CSS. I don't know how this works.

Last notes: as JS Bin includes Google Analytics in each script when running from the bare URL (like jsbin.com/aqeno, the test results are actually changed by JS Bin... It seems that the Output tab on the edit URL such as jsbin.com/aqeno/edit does not include the additional Google Analytics things, and surely yields different results, but that URL is hard to test using webpagetest.org. The reference to Stylesheets Block Downloads in Firefox and JavaScript Execution in IE as given by strager is a good start for a better understanding, but I got many questions left... Also note Steve Souders' IE8 Parallel Script Loading to make things even more complicated. (The waterfalls above are created using IE7.)

Maybe one should simply believe the release notes and documentation...

dynamically changing CSS Using jQuery on $(document).ready

Look into FUOC:
http://en.wikipedia.org/wiki/Flash_of_unstyled_content.

Assuming your CSS is being declared in your header, if you redefine it with jQuery after the document loads of course you'll see a flash of style changing. This is because, while your CSS is being rendered while the DOM populates, your jQuery is firing only after the entire page is done.

There's really no need to do this in jQuery. If you want to keep the changes inline, simply add something like this after your main stylesheet and adjust it for each page:

<style type="text/css">
    .header {
        margin-bottom: 30px;
    }
</style>

Of course, if jQuery is a requirement for this, using an IIFE function will work.

Jquery css is not working on document.ready

You might want to save the value in a variable first. Then add parentheses to get the right order of precedence. This will work.

var value = $('body').width() / (11 - 10);
$('#magic-line').css('margin-top', value); //This line is not working

console.log(value);

Does this code need to be in a document.ready?

If you are binding to the document itself, you don't need to wait until it is ready. There shouldn't be any downsides to not wrapping it in document.ready in this case.

document.ready gets fired when the DOMReady event is triggered by the browser, or when a specific test is successful for versions of browsers that don't support the DOMReady event.

Additional information. (5/22/12)

Most modern browsers implement the DOMContentLoaded event which fires when all elements defined on the document are ready to be manipulated by javascript. Other browsers either rely on a setTimeout loop that continuously checks the readystate of the document or binds directly to the onreadystatechanged method of the document (taken from jquery core). The document itself is ready to be manipulated before javascript is ever executed, therefore you never need to wait when binding directly to the document.

The only gotcha here is that if the code interacts with elements other than the document, there is a chance that the event could be triggered on the document before those elements exist. It is very unlikely for that to happen, but it can happen. If that is something that can happen with your code, then it makes sense to place it inside of $(document).ready() to prevent that scenario. Your sample doesn't warrant being placed inside of $(document).ready().

Does css will block the document ready function

$(document).ready executes when HTML-Document is loaded and DOM is ready while
$(window).load executes when complete page is fully loaded, including all frames, objects and images.

So large CSS files do not block the $(document).ready function.

Changing css display element after document.ready jquery

If you are trying to set the display property then you have wrong syntax for jQuery function css(), you need css( propertyName , value) to set property value.

Change

$('#mega-menu-1').css('display') == 'block';

To

$('#mega-menu-1').css('display', 'block') ;

OR You can also call jQuery show() method that will do the same.

$('#mega-menu-1').show();

Where do I put the $(document).ready()?

1. You should like to your JavaScript files either in the <head> or above the closing </body> tag.
2. The code can go anywhere really, but I would suggest an external JavaScript page.
3. Yes
4. This is correct.

Is there an element ready function in jquery?

Method 1

One method you could try would be setting the CSS of the element to display:none;. This would hide the element, and calling the following function would cause the element to display on DOM load.

$(document).ready(function () {
  // Put all of jQuery code in here
  $("element").show(); // substitute element for whatever is needed
});

However, I wouldn't suggest this method, because there will be a sudden jump of content once the jQuery executes, because display:none; means that there will be no trace of the element on the page

Method 2

The best method in my opinion would be to use visibility:hidden. This will cause the space where the element usually is to still appear, but there will be white-space in place of the element. That way, when the page loads, there isn't a sudden jump of content. If you use this method, you will need to use the .css() method, because .show() is essentially setting the CSS of the element to display:block; So the code will look like this

$(document).ready(function () {
  // Put all of jQuery code in here
  $("element").css("visibility", "visible") // substitute element for whatever is needed
});

For both of these methods, the CSS will make the element hidden, and this function waits until the entire DOM is loaded before it executes.

---

Related Topics