Trigger event on body load complete js/jquery

Question

I want to trigger one event on page load complete using javascript/jquery.

Is there any way to trigger event or call a simple function once page loading fully completes.

Please suggest folks if you any reference.

Answer 1

Everyone's mentioned the ready function (and its shortcuts), but even earlier than that, you can just put code in a script tag just before the closing body tag (this is what the YUI and Google Closure folks recommend), like this:

<script type='text/javascript'> pageLoad(); </script> </body> 

At this point, everything above that script tag is available in the DOM.

So your options in order of occurrence:

1. Earliest: Function call in script tag just before closing the body tag. The DOM is ready at this point (according to the Google Closure folks, and they should know; I've also tested it on a bunch of browsers).

2. Earlyish: the jQuery.ready callback (and its shortcut forms).

3. Late, after all page elements including images are fully loaded: window onload event.

Here's a live example: http://jsbin.com/icazi4, relevant extract:

</body> <script type='text/javascript'>   runPage();    jQuery(function() {     display("From <tt>jQuery.ready</tt> callback.");   });    $(window).load(function() {     display("From <tt>window.onload</tt> callback.");   });    function runPage() {     display("From function call at end of <tt>body</tt> tag.");   }    function display(msg) {     var p = document.createElement('p');     p.innerHTML = msg;     document.body.appendChild(p);   } </script> 

(Yes, I could have used jQuery for the display function, but I was starting with a non-jQuery template.)