Download - Page Load © Copyright 2014, Fred McClurg All Rights Reserved.

Page Load

© Copyright 2014, Fred McClurg All Rights Reserved

2

Loading a Page

Discussion:It is often preferred to wait until the entire page is loaded before executing a script. The onload() event does not fire until the page has completed loading.

3

Event onload() via body Attribute

Discussion:The “onload()” event can be defined as an attribute to the body element.

Example:<body onload="waitUntilLoaded()">

<h1>Event onload() via body Attribute</h1> <script> function waitUntilLoaded() { alert( 'Page load complete' ); } </script></body>

onloadViaBodyAttrib.html

4

Page onload() via window event

Discussion:The “onload()” method can also be defined as an event to the window element.

Example:<head> <title>Page onload() via window event</title> <meta charset="ISO-8859-1" />

<script> function waitUntilLoaded() { alert( 'Page load complete' ); } window.onload = function() { waitUntilLoaded(); } </script></head> onloadViaWinEvent.html

5

Show/Hide Page Elements (HTML)

HTML Example Code:<body>

<h1>Show/Hide Page Elements</h1>

<p>"I never met a bitter person who was thankful. Or a thankful person who was bitter." -- <a href="#" id="author">Nick Vujicic</a></p>

<div id="bio"> Australian motivational speaker born with a rare disorder characterized by the absence of all four limbs....</div></body> styleDisplayShowHide.html

6

Show/Hide Page Elements (JS)

JavaScript Example Code:<head><script>// show and hide biographyfunction initializeBio() { document.getElementById("author").onclick = function() { var bioObj = document.getElementById("bio");

if ( document.getElementById("bio").style.display == "block" ) { // set CSS to hide the DIV document.getElementById("bio").style.display = "none"; } else { // set CSS to show the DIV document.getElementById("bio").style.display = "block"; }};

// now hide it on the initial page load. document.getElementById("bio").style.display = "none";}

window.onload = function() { initializeBio();};</script></head> styleDisplayShowHide.html