My jQuery ready function is firing too early... It's not ready!

I'm adding resizable to several div tags that are part of a complex page开发者_StackOverflow. But the $(document).ready() if executing too early. Not everything has been parsed and the resizable fails.

How do I get jQuery to really wait until the document is ready?

I've tried...

$(document).ready()
$(document).load()
$(window).load()

By adding a temporary button with the same code as these, that I click after the page is rendered, I get the proper resizable UI.

I'm using jQuery v1.4.2 and jQuery UI v1.8.4 with Firefox v3.6.8.

But the $(document).ready() if executing too early. Not everything has been parsed and the resizable fails.

This shouldn't be. ready() fires when the DOM has been parsed and rendered. The only thing that could still be loading is style sheets (don't know what to do about those) and images.

If your resizable depends on images being fully loaded, use the load event instead.

Stupid should hurt.

I also had a body onload event that was executing after the jQuery events but on which the resizable was dependent.

Answer: Don't use both methods.

Try using $(window).load() rather than $(document).ready()... This will wait until EVERY single aspect has loaded to completion... a little slower but should iron out your bug