Differences Between $(document).ready and $(window).load

Dave

I am aware the differences between $(document).ready and $(window).load have been discussed numerous times already, maybe done to death in some circles. When I carried out my own investigation into these events I received different results in different browsers. From now on I will refer to document.ready and window.load rather than the full syntax.

Regarding document.ready

  • The event executes when the DOM is loaded. It is possible some elements i.e. images have not finished loading at that point.
  • They are additive so you can have multiple document.ready declarations on your page.
  • It works across platforms.

As for window.load

  • It is fired after the full page, including the images, has loaded.
  • Will fire after document).ready.

For the first tests I started off with a simple test page

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Page Test</title>
</head>
<body>
loaded
</body>
</html>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">

    $(window).load() {
        alert("load");
    }

    $(document).ready() {
        alert("ready");
    }
</script>

When I loaded the page in IE8 and Chrome the alerts were displayed in the order they are in the code. So if window.load is first in code the “Load” alert will display first followed by the “ready” alert. If I swap the events around so the document.ready is first in code the “ready” alert will display first followed by the “Load” alert.

These results did not match my expectations. I decided to do more detailed tests with the page below.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Page Test</title>
</head>
<body>
Hello
</body>
</html>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
    $(window).load(function () {
        alert("window load fired!");
    });

    $(document).ready(function () {
        alert("second document ready fired!");
    });
</script>
<script>
    window.onload = function () {
        alert("javascript onload fired!");
    }

    $(document).ready(function () {
        alert("document ready fired!");
    });
</script>

I loaded the page in IE8, IE11 and Chrome. In all cases the document.ready events fired before the window load events.  Specifically they were fired in the following order.

second document ready fired!
document ready fired!
window load fired!
javascript onload fired!

Now if I change the order of the script blocks containing the events like so;

<script>
    window.onload = function () {
        alert("javascript onload fired!");
    }

    $(document).ready(function () {
        alert("document ready fired!");
    });
</script>
<script>
    $(window).load(function () {
        alert("window load fired!");
    });

    $(document).ready(function () {
        alert("second document ready fired!");
    });
</script>

The order which the events are fired changes slightly to;
document ready fired!
second document ready fired!
javascript onload fired!
window load fired!

Again the document.ready events fired before the window load events. For one final test with this page I moved the script blocks in to the head section. When the page loaded the results were the same.

At this point I felt the need to return to the simple page and carry out the first test again in the same browsers as before. The results were the same as before. The document.ready event was fired first when it was first in the code and the window.load event fired first when it was first in the code. I cannot explain why this is happening.

This demonstration has been helpful to me in understanding how the document.ready and window.load events work, and hopefully you have found it useful too.

Leave a Reply