Trigger jQuery's $(window).resize only after $(window).load

Question

I want something to happen when I resize my browser window, but every thing on the page must be loaded first. This doesn't work, but you get the picture:

$(window).resize(function(){
    $(window).load(function(){
        // do stuff
    });
});

How can I make this work?

Answer 1

You need to attach the resize handler after the page has loaded, so reverse your event handlers:

$(window).load(function(){
    $(window).resize(function(){
        // do stuff
    });
});

Answer 2

I've recently had the same issue. Bind it both the load and resize event as below:

$(window).on('load resize', function () {
// your code
});

Hope this helps.