enavu webdevmania tutsvalley psdestination
visit the enavu network
15 Comments Article Title Overlay Article Title

Daily Tip : Difference between $(document).ready and $(window).load in jQuery

This is the first of many “daily tip” posts, in which i will explain the difference between $(document).ready() and $(window).load(), and when to use which.

DZoneDiggDesign FloatDeliciousBlinklistRedditFacebookGoogle BuzzTwitterStumbleUponTumblrShare
$(document).ready(function(){
//code here
});

The code above is used almost every time when we work with jQuery. Of course there are many different types of this, like $(function(){ //code here }) and some more. But i will leave that for another daily tip. This code is used when we want to initialize our jQuery codes after the DOM is ready.

So what do we need $(window).load() for ?

Sometimes you want to manipulate pictures. For example you want to verticaly and horizontaly align a picture and you need to get the width and height of the picture in order to do that. With $(document).ready() you won’t be able to do that if the visitor doesn’t have the image already loaded, in which case you need to initialize the jquery alignment function when the image finishes loading. That’s where we use…

$(window).load(function(){
//initialize after images are loaded
});

Related posts:

  1. Defer Load jQuery Plugin
  2. Verticaly center an image inside a div
  3. jQuery and Ajax :) the simple designer way
  4. How to make a completely reusable jquery modal window
  5. Automatic input field focus on page load

Slobodan Kustrimovic

This author has yet to fill his BIO.

Did you absolutely LOVE this article... share it!

Comments

  • ok, thank’s for the tip..

    i just know the different beetwen $(document).ready and $(window).load

  • I was using $(window).ready and wondering why it wasn’t working… Thanks for the tip!

  • Thanks ,this is exactly what i was looking for.

  • Thanks mate, I’m certainly putting this into a practise.. right now :-)

  • Thanks.
    I’ve been looking for a way to preload the site and this works perfectly.

    Can’t wait to figure out more inventive ways to use the window.load.

    Cheers!

  • Thans a lot for your work,as is making me know more about jquery!

  • Thank you very much , nice way of explaining

  • I was having this problem the other day without even realizing it. Spend hours on it and didn’t think of it until I saw this by accident. Thanks a lot!

  • This tip has just gave me the idea how to optimise my js code. Thank you for such a needed clear understanding!

  • great thank.. that explained for me y window load fail some time for my purpose

  • Just what I was looking for! Thanks!

  • Thx man. That solved my problem.

  • Thank you! I solved my problem of load images/

Leave your own!

Sponsors

freedcamp free project management

Popular Articles

fzilla file hosting