window.onload in jQuery

Question

I have use the example of sizzle and there I got window.onload in the last of the code.

What does this means.

My code is like this:

var init = function () {
    var trail = Sizzle;
    var foo = trail('.foo');
    foo[0].onmouseover = function () {
        this.style.backgroundColor = (this.style.backgroundColor.indexOf('blue') === 0) ? 'yellow' : 'blue';
    };
    foo[1].onmouseover = function () {
        this.style.backgroundColor = (this.style.backgroundColor.indexOf('red') === 0) ? 'yellow' : 'red';
        jQuery(foo[1]).after("<b>Hello</b>");
    }
    foo[2].onmouseover = function () {
        this.style.backgroundColor = (this.style.backgroundColor.indexOf('green') === 0) ? 'yellow' : 'green';
        jQuery(foo[3]).toggle("slow");
        jQuery('b').remove();
    }
};
window.onload = init;

What does this mean?

Function init() start to work only after window(page) load finish. — Narek, Feb 01 '12 at 12:27

score 6 · Answer 1 · edited May 23 '17 at 12:11

6

It means that you are setting the init function to handle the onload event of the document. The init function will be called when all the content in the page has loaded.

As you are using jQuery, you should use the jQuery events instead. The DOM events can only have one handler (unless you write code to chain the handlers), but the jQuery events can have multiple handlers:

$(document).load(init);

If you have more than one script in the page that uses the onload event, one will replace the other. Even if you use jQuery events, a script that hooks up the DOM event will take over the jQuery event handler, like in this question. Using the jQuery event in all scripts solves that.

edited May 23 '17 at 12:11

Community

1
1

answered Feb 01 '12 at 12:36

Guffa

640,220
96
678
956

Why the downvote? If you don't explain what you think is wrong with the answer, it can't improve it. – Guffa Feb 24 '13 at 15:56
window.onload ≠ document.onload. The OP wants to know what window.onload() does and you tell him to use document.onload. Why? – mkoistinen Feb 24 '13 at 15:57
The crazy thing is, you already know this! http://stackoverflow.com/questions/3698200/window-onload-vs-document-ready – mkoistinen Feb 24 '13 at 16:06
note that the 'load' event is removed in jQuery 3.0 – schellmax Aug 23 '17 at 15:13

score 2 · Answer 2 · answered Feb 01 '12 at 12:27

2

This means that on the load of window the function init will be executed.

answered Feb 01 '12 at 12:27

defau1t

10,373
2
32
45

window.onload in jQuery

2 Answers2