rcmdnk's blog

window.onloadとjQueryの$(document).ready等の比較
Amazon.co.jp: Alligator: OnLoad: デジタルミュージック

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.

Sponsored Links

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 DOMContentLoaded1.

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 2.

Of course, addEventListener can accept multiple methods3.

In these days, DOMContentLoaded can be used in most of the browsers4, 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) 5.

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:

test.html
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.

Sponsored Links
  1. javascript - $(document).ready equivalent without jQuery - Stack Overflow

  2. In the detail, $(document).ready is more complex (and powerful) that it emulates DOMContentLoaded in browsers which doesn’t have it (like old IE or Safari…).

  3. Usually, addEventListener is used with 3rd argument like:

    1
    
    document.addEventListener('DOMContentLoaded', func, false);
    

    Most of recent browsers set it false as default, so normally it is not necessary.

    Though in the old days like Firefox 6 requires 3rd argument, it is not necessary in these days.

    EventTarget.addEventListener() - Web APIs MDN

  4. DOMContentLoaded - Event reference MDN

    Can I use… Support tables for HTML5, CSS3, etc

  5. onLoad and onDOMContentLoaded JavaScript Tutorial

Sponsored Links

« Adding additional file usage to Brew-file How to add non-Gmail address to Gmail with Gmail's SMTP server »

}