Web Developer Post

Views: 13325 Comments: 0

Ways to fire jQuery and javascript code when the page loads

Wednesday, December 22, 2010

There are several ways to execute your javascript and jQuery codes. Some of these ways include on button clicks, key press events, timers, mouse events and on the load of the page. In this post, I'll be discussing the execution of code when the page loads.

Executing javascript and jQuery code when the page loads is a very common task that occurs on most websites. You might be aware of the many different ways to do it, but you might not be aware of how different each method works. So lets jump right into it.


Using jQuery's $(document).ready():

Using document.ready will allow you to execute code when the DOM has completely loaded. This code could execute before all assets are completely loaded such as images. If you require every element to be loaded prior to executing code, then you should use window.load() - jquery, or window.onload() - javascript. Also note that document.ready will not execute on a partial postback, only on full postbacks. Let's take a look at the example:

$(document).ready(function(){

// your code goes here.

});

 

Using jQuery's $(window).load() or javascript's window.onload() or <body onload="">:

Using these methods will execute slightly later than the document.ready method. These methods wait until all objects on the page have completed loading. If the code to execute utilizes any of the page's objects, this is where it should be placed. However, just like document.ready, these will only execute on a full postback, not a partial. Lets take a look at the example:

$(window).load(function(){

// your code goes here

});

or

window.onload = function() {

// your code goes here

}

or

<head>

function RunOnloadFunction(){

// your code goes here

}

</head>

<body onload="RunOnloadFunction()">

 

Including javascript/jQuery within the body or head tag using <script> tags:

This is a another common way to execute the code when the page is loading. Using this method will execute your code when it reaches that point in the document. You can put this at the beginning, end, anywhere within the body tag and it will execute as soon as it comes to that line of code. Unlike the methods listed above, this will execute on a partial postback. Lets take a look at an example of this method:

<body>

<script type="text/javascript">

// your code goes here

</script>

</body>

 

Using ASP.NET's pageLoad():

In my personal opinion, this is one of the best ways to execute your javascript or jQuery code, but only if you need it to execute on partial postbacks. It executes as soon as the DOM is ready, just like $(document).ready(), however it will continue to execute on partial postbacks. Lets take a look at this example:

function pageLoad(){

// your code goes here

}

 

Conclusion:

As mentioned before, there are other methods of executing your code, but these are some of the most common when the page is loading. The method to use will depend on when you need it to execute the code and if it needs to execute on partial postbacks. So there you have it!


Previous ArticlesHow to use jquery ajax in asp dot net web page
Create your very own jquery pluginNext Article


Add New Comment

Name:*
Email:*
Website:
What does three added to five make?:
Comment:*
 

Reader Comments

No comments have been posted.

Most Popular Articles


Recent Articles



© Copyright 2010. WebDeveloperPost.com
Tampa Web Design By Ricketts