Geek Daily

Jul

JavaScript - window onload Is Bad M’kay

JavaScript/Ajax

So what is wrong with the javascript window onload event? Well for many years I, just like many other developers, thought javascript window onload was perfectly fine and was exactly what I needed. Well I don’t think that is true any longer. The problem is that if you have a page with large files like images, animations, or video then there will be a huge delay before your code gets executed. The onload event does not fire until every last piece of the page is loaded.

That isn’t what we want. We just want to wait until the DOM is loaded and is able to be manipulated. So how do we do this? Well, below if the code you need to do just that. The onDomReady event accepts a function as a parameter and that function gets executed as soon as the DOM is available and before the rest of the media is done loading.

This will result in more responsive code and less delay in execution.


//create onDomReady Event
window.onDomReady = DomReady;

//Setup the event
function DomReady(fn)
{
	//W3C
	if(document.addEventListener)
	{
		document.addEventListener("DOMContentLoaded", fn, false);
	}
	//IE
	else
	{
		document.onreadystatechange = function(){readyState(fn)}
	}
}

//IE execute function
function readyState(fn)
{
	//dom is ready for interaction
	if(document.readyState == "interactive")
	{
		fn();
	}
}

Once you have included the above code in your page you can use it in a similar manner as below.


//execute as soon as DOM is loaded
window.onDomReady(onReady);

//do on ready
function onReady()
{
	alert("The DOM is ready!");
}

About the author

This entry was contributed by Justin
246 entries have been written by this author.
Contact the author

13 comments on this post

gaby de wilde says:

Jul 27, 2007 - 05:07:41

I had this great idea for a joke.

First you search for bloggers who dare write about javascript vigorously pretending to know the stuff.(ha-ha)

Then you query them if they want to help you with your JS project or if the thought horrifies them.

The excuses they make are just hilarious.

As if you embedded them in a dom tree forest.

About onload,
I think window.onlaod is way cool to show js aleart messages.

aleart(’welcome to my homepage!’)

yeah, that would be so cool. Of course we would have to add <noscript>Welcome to my homepage!<noskript>

or non script browsers wont show the message.

Or what about…

aleart(navigator.javascriptEnabled())

Imagine all the possibilities….

^_^

javaFiX says:

Jul 27, 2007 - 05:07:32

Or, better, use jQuery, which supports similar functionality for Opera and Safari also …

Jakob says:

Jul 27, 2007 - 06:07:19

This is exactly what I expected to find out after reading the title o.us poetry. Thanks for informative article

Justin says:

Jul 27, 2007 - 08:07:16

@javaFix

The code works in Opera, I don’t know about Safari though.

<html>
<head>
	<title></title>

	<script type="text/javascript">

		window.onDomReady = DomReady;
		function DomReady(fn)
		{
			//W3C
			if(document.addEventListener)
			{
				document.addEventListener("DOMContentLoaded", fn, false);
			}
			//IE
			else
			{
				document.onreadystatechange = function(){readyState(fn)}
			}
		}
		function readyState(fn)
		{
			//dom is ready for interaction
			if(document.readyState == "interactive")
			{
				fn();
			}
		}

		window.onDomReady(function(){alert("dom ready")});

	</script>
</head>
<body>

</body>
</html>

awflasher says:

Jul 27, 2007 - 07:07:34

I think the best solution is the adddomloadevent

http://www.thefutureoftheweb.com/blog/adddomloadevent

Diego Perini says:

Aug 6, 2007 - 03:08:02

On Internet Explorer the document.readyState “interactive” is not always fired, sometimes it is plainly skipped and only the “complete” state is fired.

Unfortunately, “interactive” may depend on the length of the page, if it contains images, if it is served as dynamic or static, and probably also if today date is even or odd….

Use the document.onactivate to achieve your objective, it is confirmed to always fire when the browser have started parsing the BODY for IE 5 and newer.

This does not always ensure that all the nodes are in the DOM nor does the “interactive” state. However at this point you can manipulate the DOM that has been parsed.-

潇洒 says:

Mar 5, 2008 - 12:03:40

i agree with awflasher ~ ^^ cheers~

Anthony Alexander says:

Aug 11, 2008 - 07:08:22

I dont design for non script users or no flash people, old browsers, etc. Regardless of the target user, the extra code used to sort out those instances aren’t worth it. degrade niceley, lol. like i care. if you dont upgrade regularly or dont have an os that gave u at least a decent version of a browser then you probably shouldnt be online. this is my motto. basically im just waiting for the standards to catch up till then ill place all my eggs in the IE basket until firefox becomes the next IE and becomes, sloppy, lazy and an overall tyrannical ***hole

Justin says:

Aug 11, 2008 - 08:08:39

@anthony, for the most part I feel the same way and in a lot of cases I have the liberty to exclude certain classes of users and enforces a minimum requirement for my apps.

However, this is not always the case for me and sometimes, as big of a pain as it is, I have to support older browsers.

So, if you are able to ignore older browsers and still not lose a significant portion of your audience or revenue then I envy you.