CODEWITHSUNDEEP
javascriptjqueryhtml
pravin
pravin

Reputation: 2155

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.

Upvotes: 22

Views: 139103

Answers (10)

devGarber
devGarber

Reputation: 17

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>

Upvotes: -2

Nikunj K.
Nikunj K.

Reputation: 9199

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();
            } 
        } });

Upvotes: 0

Raynos
Raynos

Reputation: 169391

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

This will trigger once the DOM structure is ready.

Upvotes: 2

rugk
rugk

Reputation: 5513

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?

Upvotes: 0

Coin_op
Coin_op

Reputation: 10718

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.

Upvotes: 3

T.J. Crowder
T.J. Crowder

Reputation: 1074266

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

Upvotes: 30

Sarfraz
Sarfraz

Reputation: 382696

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...
};

Upvotes: 10

rahim asgari
rahim asgari

Reputation: 12437

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

Upvotes: 0

mgamer
mgamer

Reputation: 14050

Isn't 

  $(document).ready(function() {

  });

what you are looking for?

Upvotes: 1

BrunoLM
BrunoLM

Reputation: 100331

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");

Upvotes: 25

Related Questions