Primitive

jQuery: $(document).ready(function(){…}) vs $(window).bind(’load’, function(){…})

Wednesday, December 9th, 2009 | Coding, Tips & Tricks, jQuery | tiaan

The $(document).ready(function(){…}) is great and I always use it. It gets called after all the page elements are loaded, which means that all your input boxes, img, etc are there by the time you execute your javascript. Up until today I didn’t need anything else…Today I ran into a problem, I needed the loaded image’s width and height. Which is itself is pretty easy, just $(’#loaded_image’).css(’width’); and $(’#loaded_image’).css(’height’); , but the problem came in when I needed to get those values when the document is ready and the $(document).ready() function gets called when all the elements are there, but not necessarily the images are loaded. So when i called those functions i got back an error because there wasn’t actually a image there yet.

Thats where $(window).bind(’load’, function(){…}) comes in. It gets called after all the images, iframes, etc are loaded allowing me to get my image width and height without an issue.

Although $(window).bind(’load’, function(){…}) provides less unforeseen problems I still prefer the $(document).ready() for everyday use. You rarely want to pause your javascript until every single image is loaded. That could cause more unforeseen problems.

Update:
The $(window).bind(’load’, function(){…}) and $(document).ready() are not exclusive, you can use both on the same document.

24 Comments to jQuery: $(document).ready(function(){…}) vs $(window).bind(’load’, function(){…})

Leave a comment