CODEWITHSUNDEEP
javascriptjquerydom-events
sams5817
sams5817

Reputation: 1037

How to delay calling of javascript function?

I'm new to JavaScript.

I would like to call JavaScript / jQuery function after the page load in aspx page.

I tried using <form onload="function()"> and window.load = function(){}, but the JavaScript is still trigger before some of the content fully loaded.

Is it possible to call during Page_PreRender in aspx page and not in code behind, so that I can delay the JavaScript function ?

I tried setTimeout("function()",5000) to solve the problem.

However setTimeout() seem like is not compatible with some browser, e.g: caused looping in Google Chrome.

Upvotes: 32

Views: 77910

Answers (5)

mplungjan
mplungjan

Reputation: 178026

setTimeout is compatible with all browsers since 1996. You should avoid the evaluation of "functionName()" and instead do:

setTimeout(functionName,5000)

UPDATE: If you initially expect a variable passed to the function and none when in the timeout, you need to do this instead:

setTimeout(function() { functionName() },5000)

However you are calling the onload incorrectly, so you need to do either this:

window.addEventListener("load",function() {
  // your stuff
}

or the simpler

window.onload=function() {
  // your stuff
}

or, since you are using jQuery, this:

$(document).ready(function() {
    // your stuff
});

or just this:

$(function() {
    // your stuff
});

Upvotes: 76

MadBender
MadBender

Reputation: 1458

$(document).ready(function(){ 

   //Code goes here

});

or old style

<body onload="myFunction()">

Upvotes: 1

Oscar Godson
Oscar Godson

Reputation: 32726

If you want to be 100% sure that it's when the page ACTUALLY loads, use:

$(window).load(function(){
   //After EVERYTHING loads, including images.
})

The other's solution, onload works, but it loads once the DOM is ready, but not when the window is actually finished loading.

Upvotes: 5

Ken Browning
Ken Browning

Reputation: 29091

If you're going to be using jQuery then it's preferable to attach an event to the document ready event using one of the following:

$(document).ready(callback);

or

$(document).ready(function () { /* do stuff */ });

or

$(callback);

or

$(function () { /* do stuff */ });

Upvotes: 3

Karsten
Karsten

Reputation: 1866

Would be best to use a framework like jQuery.
In jQuery you can define a function like this:

$(document).ready(function() {

});

This way it will be called when the DOM is fully loaded.

A full documentation of the ready() function can be found here.

Upvotes: 0

Related Questions