How do you add functions to $(window).load()?

Question

Just curious if there's an easy way to add functions to the $(window).load() event before it has fired. For example, if you call $(window).load() twice in the beginning of the page, only the function of the second call will execute onload.

Is there some sort of tool built into jQuery for adding to the onload event instead of replacing it? If so, how about for the $(document).ready() call?

Use use it twice. `$(window).load(function() {...}); $(window).load(function() {...});` — Petah, Jun 07 '11 at 08:21
What do you mean "add functions to the $(window).load() event before it has fired" — Hasan Fahim, Jun 07 '11 at 08:24

score 6 · Answer 1 · answered Jun 07 '11 at 08:23

6

They actually do stack in the order specified. Here's an example : http://jsfiddle.net/73D9Z/

I've used window.ready()

$(window).ready(function(){
    alert('window ready 1');
});

$(window).ready(function(){
    alert('window ready 2');
});

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

$(document).ready(function(){
    alert('document ready 2');
});

answered Jun 07 '11 at 08:23

JohnP

49,507
13
108
140

What's the difference between `$(window).ready()` and `$(document).ready()`? – trusktr Jun 07 '11 at 08:37
@trusktr. There is no $(window).ready(). It is $(document).ready(handler) – Hasan Fahim Jun 07 '11 at 08:47
@hasan, but the above example seems to work with $(window).ready()! – trusktr Jun 16 '11 at 22:55
@JohnP The link you posted I already know.... but this answer shows $(window).ready(), *not* $(window).load()... and it still seems to work... – trusktr Jun 16 '11 at 22:57
@trusktr Why wouldn't window.ready work? These are just different event handlers. – JohnP Jun 17 '11 at 04:02
@JohnP. Where is $(window).ready() mentioned in the post you provided? It talks about $(window).load() – Hasan Fahim Jun 17 '11 at 06:47
@trusktr. I am unable to find information about this $(window).ready() event anywhere through google. All I find is $(window).load() and $(document).ready(). If you know any link where I can get more information about it, then do let me know. – Hasan Fahim Jun 17 '11 at 07:00
@trusktr. Anyways, the point is that $(window).load() gets called once, when the window loads. So you could use stacking as mentioned by @JohnP. If in the example answer above you put $(window).ready() after $(document).ready() then $document.ready() executes first. Hence I believe, which ever of these event comes first, gets executed first. But in the case of $(document).ready() and $(window).load(), $(document).ready() always gets executed first. – Hasan Fahim Jun 17 '11 at 07:01
I agree, but I've found that with more complicated scripts where window.load events are embedded inside jQuery functions, one or the other will get executed first (and the order matters, but it is random depending on the users browser cache), and I've had to create flags inside them to determine witch one executes first. In some cases, one will execute and the other won't. – trusktr Jun 19 '11 at 18:07
For example, if a stand alone $(window).load() executes first, then one that is nested inside a jQuery event won't execute. If the script happens to read the one inside the jQuery event before the standalone one and all content is already loaded (e.g. user has all content cached in the browser) then the window.load that is inside the jQuery event will fire if the jQuery event happens before the standalone window.load happens. – trusktr Jun 19 '11 at 18:08
It's pretty complicated, but I've figured it out with hours of testing and flags so I can tell in which situation the window.load calls happen (if they happen). – trusktr Jun 19 '11 at 18:09
By the way, I figured all this out _after_ posting this question. :D – trusktr Jun 19 '11 at 18:09

score 2 · Accepted Answer · answered Sep 03 '11 at 11:51

function windowLoad(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    } else {
        window.onload = function() {
            if (oldonload) {
                oldonload();
            }
            func();
        }
    }
}

function documentReady(func) {
    var oldonload = document.ready;
    if (typeof document.ready != 'function') {
        document.ready = func;
    } else {
        document.ready = function() {
            if (oldonload) {
                oldonload();
            }
            func();
        }
    }
}

score 1 · Answer 3 · answered Jun 07 '11 at 08:27

1

$(window).load() gets executed after a page is rendered.

$(document).ready(handler) executes the function passed as parameter, after the DOM is ready and before the page is rendered.

answered Jun 07 '11 at 08:27

Hasan Fahim

3,875
1
30
51

How do you add functions to $(window).load()?

3 Answers3