$(document).ready() fires too early

Question

So, I need to know the width of an element with javascript, the problem I have is that the function fires too early and the width changes when the css is tottally applied. A

Answer 1

I have absolutely, repeatably seen the same problem in IE9 and IE10. The jquery ready() call fires and one of my <div>'s does not exist. If I detect that and then call again after a brief timeout() it works fine.

My solution, just to be safe, was two-fold:

1. Append a <script>window.fullyLoaded = true;</script> at the end of the document then check for that variable in the ready() callback, AND

2. Check if $('#lastElementInTheDocument').length > 0

Yes, I recognize that these are nasty hacks. However, when ready() isn't working as expected some kind of work-around is needed!

As an aside, the "correct" solution probably involves setting $.holdReady in the header, and clearing it at the end of the document. But of course, the really-correct solution is for ready() to work.

Answer 2

The jQuery .ready() function fires as soon as the DOM is complete. That doesn't mean that all assets (like images, CSS etc) have been loaded at that moment and hence the size of elements are subject to change.

Use $(window).load() if you need the size of an element.

Answer 3

You could use $(window).load(), but that will wait for all resources (eg, images, etc). If you only want to wait for the font to be loaded, you could try something like this:

<script type="text/javascript"> 
    var isFontLoaded = false;
    var isDocumentReady = false;
    $("link[href*=fonts.googleapis.com]").load(function () {
        isFontLoaded = true;
        if (isDocumentReady) {
            init();
        }
    });
    $(document).ready(function () {
        isDocumentReady = true;
        if (isFontLoaded) {
            init();
        }
    });
    function init () {
        // do something with $('#target').outerWidth()
    }
</script> 

Disclaimer: I'm not totally sure this will work. The <link> onload event may fire as soon as the stylesheet is parsed, but before its external resources have been downloaded. Maybe you could add a hidden <img src="fontFile.eot" /> and put your onload handler on the image instead.

Answer 4

If you rely on external content to be already loaded (e.g. images, fonts), you need to use the window.load event

$(window).on("load", function() {
    // code here
});

The behaviour of these events is described in this article:

There is [a] ready-state however known as DOM-ready. This is when the browser has actually constructed the page but still may need to grab a few images or flash files.

Edit: changed syntax to also work with jQuery 3.0, as noted by Alex H

Answer 5

The "ready" event fires when the DOM is loaded which means when it is possible to safely work with the markup.

To wait for all assets to be loaded (css, images, external javascript...), you'd rather use the load event.

$(window).load(function() {
    ...
});

Answer 6

The problem $(document).ready() fires too early can happen sometimes because you've declared the jQuery onReady function improperly.

If having problems, make sure your function is declared exactly like so:

 $(document).ready(function() 
 {
   // put your code here for what you want to do when the page loads.
 });

For example, if you've forgotten the anonymous function part, the code will still run, but it will run "out of order".

console.log('1');
$(document).ready()
{
  console.log('3');
}
console.log('2');

this will output

1
3
2