JavaScript has a function of window.onload = function(), which is executed after the page is loaded.

jQuery also has similar function of $(document).ready(runction()), but they are a little different.

• window.onload
• $(document).ready
• Implement $(document).ready like behavior w/o jQuery
• Multiple registration at onload
• Execution order

window.onload

window.onload method is executed when onload even occurs. This means when not only DOM tree is built, but also all data, such images, are loaded.

To give assign a function, it is like:

1
2
3

window.onload = function() {
  console.log('onload 1');
}

Therefore, if you have another liens like below, it will overwrite the previous one.

1
2
3

window.onload = function() {
  console.log('onload 2');
}

In this case, only onload 2 is shown.

There are another method of document.body.onload, which in principle works in the same way as window.onload, but it behaves a little different in different browser, so that window.onload is recommended rather than document.body.onload.

$(document).ready

This is usually used when jQuery is used.

This is executed when DOM tree is built. It doesn’t wait loading such images.

Therefore, it is executed earlier than window.onload.

The code is like:

1
2
3

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

This works to put a function, so multiple inputs can be accepted.

You can omit some parts and can write like:

1
2
3

$(function() {
  console.log('ready 2');
});

If you have above both, a console shows ready 1 and ready 2.

If $ has a name collision problem, it should be like

1
2
3

jQuery(document).ready(function($) {
  console.log('ready 3');
});

And following style with on works similar, but a little different (see below).

1
2
3

$(document).on('ready', function(){
  console.log('ready 4');
});

Implement $(document).ready like behavior w/o jQuery

Main differences between window.onload and $(document).ready are the timing when it is executed, whether it can have multiple components or not.

For the timing, you can do most of the things when DOM tree is built, and might want to start w/o waiting images.

In addition, it is much easier just to add, not overwrite the method, so $(document).ready is very useful and it is great if it can be implemented w/o jQuery.

To do this, you should add an event listener to DOMContentLoaded¹.

Here is an example:

1
2
3

document.addEventListener('DOMContentLoaded', function() {
  console.log('DOMContentLoaded');
});

DomContentloaded means as in the literature, when DOM is built. As a matter of fact, $(document).ready uses this internally ².

Of course, addEventListener can accept multiple methods³.

In these days, DOMContentLoaded can be used in most of the browsers⁴, so that $(document).ready can be replaced by DOMContentLoaded.

Multiple registration at onload

On the other hand, you may need to execute methods after loading all images.

It can be done by window.onload, but only one method can be registered.

If you can use jQuery, it is easy that you can write like:

1
2
3

$(window).load(function() {
  console.log('onload jquery 0');
});

or

1
2
3
4
5
6
7

$.event.add(window,'load',function() {
  console.log('event add load 0');
});

$(window).on('load', function() {
  console.log('on load 0');
});

If you can’t use jQuery, you need to write like:

1
2
3
4
5
6
7
8
9
10
11

function ready_func (){
  console.log('ready_func');
}
if( window.addEventListener ){
  window.addEventListener('load', ready_func);
}else if( window.attachEvent ){
window.attachEvent('onload', ready_func);
}
//else{
//  window.onload = ready_func;
//}

attacEvent method is for IE.

Be careful that argument is a little different between addEventListener and attachEvent (load and onload, respectively) ⁵.

Most of browser can be covered by these two methods, but if necessary, window.onload can be placed here (though only one method can be registered).

Execution order

As written above, ready is executed earlier than load. To check more details, let’s try following code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93

<html>
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<script>
(function() {
  console.log('IIFE 0')
}());

window.onload = function() {
  console.log('load 0 window.onload = function() {...');
};

window.addEventListener('load', function() {
  console.log('load 0 window.addEventListener("load", function() {...');
});

$(window).load(function() {
  console.log('load 0 $(window).load(function() {...');
});

$(window).on('load', function() {
  console.log('load 0 $(window).on("load", function() {...');
});

$.event.add(window,'load', function() {
  console.log('load 0 $.event.add(window, "load", function() {...');
});

$(document).ready(function() {
  console.log('ready 0 $(document).ready(function() {...');
});

document.addEventListener('DOMContentLoaded', function() {
  console.log('ready 0 document.addEventListener("DOMContentLoaded", function() {...');
});

$(document).on('ready', function() {
  console.log('ready 0 $(document).on("ready", function() {...');
});

$(function() {
  console.log('ready 0 $(function() {...');
});

(function() {
  console.log('IIFE 1')
}());

window.onload = function() {
  console.log('load 1 window.onload = function() {...');
};

window.addEventListener('load', function() {
  console.log('load 1 window.addEventListener("load", function() {...');
});

$(window).load(function() {
  console.log('load 1 $(window).load(function() {...');
});

$(window).on('load', function() {
  console.log('load 1 $(window).on("load", function() {...');
});

$.event.add(window,'load', function() {
  console.log('load 1 $.event.add(window, "load", function() {...');
});

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

document.addEventListener('DOMContentLoaded', function() {
  console.log('ready 1 document.addEventListener("DOMContentLoaded", function() {...');
});

$(document).on('ready', function() {
  console.log('ready 1 $(document).on("ready", function() {...');
});

$(function() {
  console.log('ready 1 $(function() {...');
});

(function() {
  console.log('IIFE 2')
}());
</script>
</body>
</html>

This code uses:

• load:
  • window.onload = function() {...
  • window.addEventListener("load", function() {...
  • $(window).load(function() {... (jQuery)
  • $(window).on("load", function() {... (jQuery)
  • $.event.add(window, "load", function() {... (jQuery)
• ready:
  • document.addEventListener("DOMContentLoaded", function() {...
  • $(document).ready(function() {... (jQuery)
  • $(function() {... (jQuery)

In addition, there are some immediately-invoked function expressions (IIFE).

The result with Google Chrome(43.0.2357.130, Mac) is:

IIFE 0
IIFE 1
IIFE 2
ready 0 $(document).ready(function() {...
ready 0 $(function() {...
ready 1 $(document).ready(function() {...
ready 1 $(function() {...
ready 0 $(document).on("ready", function() {...
ready 1 $(document).on("ready", function() {...
ready 0 document.addEventListener("DOMContentLoaded", function() {...
ready 1 document.addEventListener("DOMContentLoaded", function() {...
load 0 window.addEventListener("load", function() {...
load 0 $(window).load(function() {...
load 0 $(window).on("load", function() {...
load 0 $.event.add(window, "load", function() {...
load 1 $(window).load(function() {...
load 1 $(window).on("load", function() {...
load 1 $.event.add(window, "load", function() {...
load 1 window.onload = function() {...
load 1 window.addEventListener("load", function() {...

On the other hand, the result with Firefox(39.0, Mac) shows almost same, but load 1 window.onload = function() {... is shown before load 0 window.addEventListener("load", function() {....

After some tests, followings can be seen:

• About ready:
  • Frist, jQuery’s document ready related things, such $(document).ready, or $(function(), are executed in the written order.
  • Second, $(document).on("ready" is executed.
  • Then, "DOMContentLoaded" is executed.
• About load:
  • Only the last one of window.onload is executed.
  • window.onload and addEventListener("load" are executed in the written order. But if there are more than one window.onload, the first one is used as an order point.
    • In above example, load 1 window.onload is written in the last, but load 0 window.onload is used as an order point, therefore it is executed before load 1 window.addEventListener("load".
  • Methods are executed in written order in jQuery’s methods, $(window).load, $(window).on("load" and $event.add(window, "load".
  • On Firefox, window.onload and addEventListener("load" are executed before jQuery’s load, if it is written before all of jQuery’s load methods.
    • jQuery’s load is executed first if any of jQuery’s load is written before window.onload.
    • Here, the order point of window.onload is the first written one as written above.
  • On Google Chrome, addEventListener("load" is executed beore jQuerey’s load, if it is written before all of jQuery’s load method.
    • jQuery’s load is executed first if any of jQuery’s load is written before addEventListener("load".
  • On Google Chrome, window.onload is executed before jQuery’s load in any case.

It is a bit complex, but one could argue that it is unstable if these different methods are used all together, so that it should be written in the same way in each load or ready.