112

If you want an event to work on your page, you should call it inside the $(document).ready() function. Everything inside it will load as soon as the DOM is loaded and before the page contents are loaded.

I want to do javascript code only after the page contents are loaded how can I do that?

Alex
  • 34,581
  • 26
  • 91
  • 135

8 Answers8

225

Use load instead of ready:

$(document).load(function () {
 // code here
});

Update You need to use .on() since jQuery 1.8. (http://api.jquery.com/on/)

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

From this answer:

According to http://blog.jquery.com/2016/06/09/jquery-3-0-final-released/:

Removed deprecated event aliases

.load, .unload, and .error, deprecated since jQuery 1.8, are no more. Use .on() to register listeners.

https://github.com/jquery/jquery/issues/2286

Andreacw5
  • 17
  • 1
  • 6
Matt
  • 43,482
  • 6
  • 101
  • 102
  • 1
    From the comment on this answer: http://stackoverflow.com/a/37817516/957246 $(window).on("load", function() { // code here }); ..because ".load" is deprecated. – trapper_hag Sep 20 '16 at 14:19
  • using .on() it's so obvious.. but I spent 1h knocking my head against the wall before finding this.. thank you..! – ghuroo Feb 16 '17 at 06:11
  • 6
    Watch out for the mistake of trying `$(document).on('load', ...` it needs to be `$(window).on('load',...` – User Aug 02 '18 at 07:34
43

nobody mentioned this

$(function() {
    // place your code
});

which is a shorthand function of

$(document).ready(function() { .. });
Zoltán Süle
  • 1,482
  • 19
  • 26
38

Following

$(document).ready(function() { 
});

can be replaced

$(window).bind("load", function() { 
     // insert your code here 
});

There is one more way which I'm using to increase the page load time.

$(document).ready(function() { 
  $(window).load(function() { 
     //insert all your ajax callback code here. 
     //Which will run only after page is fully loaded in background.
  });
});
Kshitiz
  • 2,673
  • 1
  • 18
  • 24
  • 2
    a load handler in the ready handler? That's madness.You don't need the document ready since window does exist at that point and you can attach a handler without it. – dalore Feb 23 '15 at 19:06
  • The load handler inside the ready handler does not work as of jQuery 3.0. See https://stackoverflow.com/a/48718000/4564945 – Necreaux May 03 '21 at 20:51
  • It is a very old answer. Check the alternative function for jquery 3.0 – Kshitiz Jun 29 '21 at 06:27
20

You can avoid get undefined in '$' this way

window.addEventListener("DOMContentLoaded", function(){
    // Your code
});

EDIT: Using 'DOMContentLoaded' is faster than just 'load' because load wait page fully loaded, imgs included... while DomContentLoaded waits just the structure

Diego Vinícius
  • 2,125
  • 1
  • 12
  • 23
18

Edit: This code will wait until all content (images and scripts) are fully loaded and rendered in the browser.

I've had this problem where $(window).on('load',function(){ ... }) would fire too quick for my code since the Javascript I used was for formatting purposes and hiding elements. The elements where hidden too soon and where left with a height of 0.

I now use $(window).on('pageshow',function(){ //code here }); and it fires at the time I need.

Boyd Cyr
  • 191
  • 1
  • 6
  • 1
    This one helped me too, I exactly wanted to run some code after the jQuery Mobile page was displayed. Thank you. @Boyd Cyr – codedudey Jan 25 '18 at 12:18
  • Just wanted to add how much more helpful this code is compared to the accepted answer. Thanks a lot. – Countzero Sep 25 '20 at 09:57
10

I am looking for the same problem and here is what help me. Here is the jQuery version 3.1.0 and the load event is deprecated for use since jQuery version 1.8. The load event is removed from jQuery 3.0. Instead, you can use on method and bind the JavaScript load event:

$(window).on('load', function () {
  alert("Window Loaded");
});
always-a-learner
  • 3,671
  • 10
  • 41
  • 81
7

write the code that you want to be executed inside this. When your document is ready, this will be executed. 

$(document).ready(function() { 

});
Marc-André Denault
  • 81
  • 1
  • 2
7

And if you want to run a second function after the first one finishes, see this stackoverflow answer.

Community
  • 1
  • 1
Guasqueño
  • 405
  • 9
  • 20