Trigger event on body load complete js/jquery

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.

---

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.)

---

When the page loads totally (dom, images, ...)

$(window).load(function(){
    // full load
});

When DOM elements load (not necessary all images will be loaded)

$(function(){
    // DOM Ready
});

Then you can trigger any event

$("element").trigger("event");

---

jQuery:

$(function(){
  // your code...this will run when DOM is ready
});

If you want to run your code after all page resources including images/frames/DOM have loaded, you need to use load event:

$(window).load(function(){
  // your code...
});

JavaScript:

window.onload = function(){
  // your code...
};

---

The windows.load function is useful if you want to do something when everything is loaded.

$(window).load(function(){
    // full load
});

But you can also use the .load function on any other element. So if you have one particularly large image and you want to do something when that loads but the rest of your page loading code when the dom has loaded you could do:

$(function(){
    // Dom loaded code

    $('#largeImage').load({
        // Image loaded code
    });
});

Also the jquery .load function is pretty much the same as a normal .onload.

---

$(document).ready(function() {
    // do needed things
});

This will trigger once the DOM structure is ready.

---

Isn't

  $(document).ready(function() {

  });

what you are looking for?

---

$(document).ready( function() { YOUR CODE HERE } )

---

You may also use the defer attribute in the script tag. As long as you do not specify async which would of course not be useful for your aim.

Example:

<script src="//other-domain.com/script.js" defer></script>
<script src="myscript.js" defer></script>

As described here:

In the above example, the browser will download both scripts in parallel and execute them just before DOMContentLoaded fires, maintaining their order.

[...] deferred scripts should run after the document had parsed, in the order they were added [...]

Related Stackoverflow discussions: How exactly does <script defer=“defer”> work?

---

This will call function when the DOM structure is ready

$(document).ready(function () {
        userCommission();
        //Show commision box
        $('#userroles').change(function(){
           userCommission();
        });

        function userCommission() {
           var roles = $('#userroles').val();
           var result = roles.map(function (x) { 
                return parseInt(x, 10); 
            });
            var i = result.indexOf(6);           
            console.log(i);
            if(i == -1) {
                console.log('inside');
                $('.user-commission :input').attr("disabled", true);;
                $('#user-commission').hide();
            } 
        } });

---

The below code will call a function while the script is done loading

<html>
 <body></body>
<script>
 call();
 function call(){ alert("Hello Word");}
</script>
</html>