Jul 27

JavaScript - window onload Is Bad M’kay

JavaScript/Ajax Add comments

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 prefectly 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!");
}
People who have a passion of creating websites can look into courses like 70-270 and 70-282 to learn about developing a site. The internet hosting can be subscribed from midphase or another company providing competitive rates, hostgator. With the use of wireless internet the site can be uploaded with comfort. To increase the visibility of the site, seo software can be used.


Cremation Urns | Coach Purse

Popularity: 37% [?]

If you liked this article consider subscribing to my free rss article feed to automatically get new articles in your feed reader.

11 Responses to “JavaScript - window onload Is Bad M’kay”

  1. gaby de wilde Says:
    July 27th, 2007 at 5:41 am

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

    ^_^

  2. javaFiX Says:
    July 27th, 2007 at 5:56 am

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

  3. Jakob Says:
    July 27th, 2007 at 6:31 am

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

  4. Justin Says:
    July 27th, 2007 at 8:07 am

    @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>
  5. awflasher Says:
    July 27th, 2007 at 7:50 pm

    I think the best solution is the adddomloadevent

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

  6. All in a days work… Says:
    July 31st, 2007 at 5:43 am

    […] Not window.onload, onDomReady or adddomloadevent With large files, there will be a delay before code gets executed. The onload event doesn’t fire until the whole page is loaded. onDomReady accepts a function as a parm and it gets executed as soon as the DOM is available, BEFORE the rest is done loading. […]

  7. Diego Perini Says:
    August 6th, 2007 at 3:07 pm

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

  8. I am just a programmer » JavaScript - window.onload Is Bad M’kay Says:
    November 4th, 2007 at 6:19 am

    […] read more | digg story […]

  9. 潇洒 Says:
    March 5th, 2008 at 12:21 am

    i agree with awflasher ~ ^^ cheers~

  10. Anthony Alexander Says:
    August 11th, 2008 at 7:46 am

    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

  11. Justin Says:
    August 11th, 2008 at 8:07 am

    @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. :D

Leave a Reply

WP Theme & Icons by N.Design Studio
Entries RSS Login