13

Is there any trick how to start a function in javascript, which starts when the page is completely loaded?

Kit
  • 20,354
  • 4
  • 60
  • 103
njaknjak
  • 755
  • 4
  • 9
  • 14

9 Answers9

35

If you mean when the HTML document has loaded, use the ready event:

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

Or the shorthand:

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

If you mean when the page including all style sheets, scripts, images and whatnot has completed loading, use the load event:

$(window).load(function(){
  ...
});
Guffa
  • 687,336
  • 108
  • 737
  • 1,005
  • 1
    -1 No. Thats DOM ready, not when the window is completely loaed. The DOM is ready before all the images etc have been downloaded and before the page is rendered to the client. – James Westgate Mar 17 '11 at 22:49
  • @James Westgate: Too late, I have already cleared that up in the answer. – Guffa Mar 17 '11 at 22:50
  • @JamesWestgate, The accepted answer to this SO question says : http://stackoverflow.com/questions/4584373/difference-between-window-loadfunction-and-document-readyfunction says : bit of a correction, there is no: $(document).load(function() { – Istiaque Ahmed Mar 13 '13 at 12:53
  • I notice this is still incorrect, nearly 2 years later - there is no document load event that Im aware of - only $(window).load – James Westgate Mar 13 '13 at 13:19
  • @JamesWestgate: I corrected that. And you still have this answer donwloaded nearly 2 years later, although the issue that you stated for the downvote was already corrected even before you downvoted it... – Guffa Mar 13 '13 at 15:00
  • Now that its fixed, the downvote is removed! I dont think I made myself clear first time.... – James Westgate Mar 13 '13 at 15:39
  • @JamesWestgate: You didn't say anything about `$(document).load` the first time. – Guffa Mar 13 '13 at 16:15
3
$( window ).bind( 'load', function()
{
    //your code in here
} );
JAAulde
  • 19,250
  • 5
  • 52
  • 63
1

When DOM is ready then use .ready event.

jQuery(document).ready(function(){
  //content
});

you also use .load event when page load images.

jQuery(window).load(function(){
  //content
});
Bharat Chodvadiya
  • 1,644
  • 4
  • 20
  • 31
1

Check this: http://api.jquery.com/ready/

 jQuery(document).ready(function($) {
 // Code using $ as usual goes here.
 });
gok
  • 1,137
  • 1
  • 9
  • 30
1

This depends on your definition of "load". Check out these two functions in the jQuery docs:

Specifically, you can see the differences in the ready() function's doc page.

While JavaScript provides the load event for executing code when a page is rendered, this event does not get triggered until all assets such as images have been completely received. In most cases, the script can be run as soon as the DOM hierarchy has been fully constructed. The handler passed to .ready() is guaranteed to be executed after the DOM is ready, so this is usually the best place to attach all other event handlers and run other jQuery code. When using scripts that rely on the value of CSS style properties, it's important to reference external stylesheets or embed style elements before referencing the scripts.

In cases where code relies on loaded assets (for example, if the dimensions of an image are required), the code should be placed in a handler for the load event instead.

Mark Hildreth
  • 42,023
  • 11
  • 120
  • 109
0

To call a method once the document is loaded completely use

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

Or else if page is loading through an ajax call use

$('#containerdiv').load('samplepage.jsp', function() {
  alert("ajax load complet.."); 
});
Donato Szilagyi
  • 4,279
  • 4
  • 36
  • 53
sjith
  • 445
  • 5
  • 7
0

If you really want your Javascript to run once 'everything' all your HTML is loaded, you can with

window.onload = function(){
   // Do stuff
}
Eugene Lai
  • 49
  • 1
  • 4
0

Try binding a load event callback to the last image on the page.

Brent Worden
  • 10,624
  • 7
  • 52
  • 57
-1

You are looking for the window load event.

In jQuery you attach the load event as follows: 

$(document).ready(function() {

  $(window).load(function() {

  }

}

Note that you need to place this inside a document ready for some browsers, IE8 OTTOMH.

James Westgate
  • 11,306
  • 8
  • 61
  • 68
  • Why would you need to delay hooking up the load event? It's used on millions of pages, and rarely (if ever) done by hooking up the event from an event like that. – Guffa Mar 17 '11 at 22:52
  • I ran into this problem where window.load was not being triggered and the solution was to wrap the window.laod inside document.ready. I refer you to http://stackoverflow.com/questions/5006922/window-load-inside-a-document-ready – James Westgate Mar 17 '11 at 22:59