Page Load © Copyright 2014, Fred McClurg All Rights Reserved.
-
Upload
percival-austin -
Category
Documents
-
view
213 -
download
0
Transcript of 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