June 14, 2010

How to run Javascript code before document is completely loaded (using jQuery)

Question by eliza sahoo

I am sharing a tip with you all.Please add on to this discussion.

JQuery helps faster page load than javascript. JQuery functions are fired when the related elements are loaded, instead of complete pageload.
This is a common practice to call a javascript function when page is loaded like

window.onload = function(){ alert("Mindfire") }

or

<body onload="javascript:document.getElementById('user_id').focus();">

Inside of which is the code that we want to run right when the page is loaded. Problematically, however, the Javascript code isn’t run until all images are finished downloading (this includes banner ads). The reason for using window.onload in the first place is due to the fact that the HTML ‘document’ isn’t finished loading yet, when you first try to run your code.
To circumvent both problems, jQuery has a simple statement that checks the document and waits until it’s ready to be manipulated, known as the ready event

$(document).ready(function()

{
   // Your code here
 });

Answer by Starx

if you want to run a script before a document is ready then simply put inline script like

<div> .........................</div>
<div> another division </div>
<script>alert('hi');</script>
<div id="this">...................</div>
.
.
.
.
.

Author: Nabin Nepal (Starx)

Hello, I am Nabin Nepal and you can call me Starx. This is my blog where write about my life and my involvements. I am a Software Developer, A Cyclist and a Realist. I hope you will find my blog interesting. Follow me on Google+

...

Please fill the form - I will response as fast as I can!