onLoad Event Trigger
Learning to use an onLoad event handler is great. Through the use of this simple event handler, you can time actions to coincide with subtle things such as starting an action when the page element is finished loading and is displayed. Applying a CSS rule when a large image is finished downloading, for example.
Try downloading a large file such as an audio or video file. Change the border property of a table to 1 with a bgcolor=”red” statement and a border will be displayed around the object that is 1 pixel wide, colored red, when the file is finished loading into the page. Put the instructions in a script in the head of the document and state the JavaScript function within the body of the document as that to be processed when the onLoad event is triggered.
The example below uses the onLoad event in the BODY tag to display an alert box with the text given when the entire document is finished loading. You don’t have to apply this rule in terms of document wide alterations – the onLoad event can be triggered in any HTML tag and applied when the tag is finished loading by the browser.
<html>
<head>
<script type="text/javascript">
function mymessage()
{
alert("This message was triggered from the onload event");
}
</script>
</head>
<body onload="mymessage()">
</body>
</html>
You can accomplish quite a bit of creative actions using this simple event. Try mixing this event with its opposite, the onUnload event handler. onUnload is very handy to write user preferences or any generated data to a cookie when the page is closed, I’ve found. You can then use the data contained within the cookie and apply it to the next page by applying it using the onLoad function in the next page.
|
