Drag and Drop with Microsoft Internet Explorer 5
A Gift of "Life" : The Document Object Model
You are here: irt.org | Articles | Dynamic HTML (DHTML) | Displaying Temporary Pages [ previous next ]
Published on: Saturday 17th October 1998 By: Ben Allen
Loading.. Please Wait
Using JavaScript and DHTML, you can display a page telling your audience to wait while the page elements load. This can be used when you have a large image loading.
The basic idea behind a temporary page is that the elements (usually images) remain hidden to the viewer until they are fully loaded, while displaying a message. When the images have loaded, the temporary message is removed, and the images revealed.
This can be implemented using fairly simple JavaScript code, utilising Dynamic HTML to hide and reveal the page elements.
This code will display a message while one image, image1.jpg, is loaded.
Note: This will only work in version 4 browsers!
<html>
<head>
<script><!--
function showImage() {
if (navigator.appName == "Microsoft Internet Explorer") {
document.all.wait.style.visibility="hidden";
document.all.mypage.style.visibility="visible";
}
else {
document.layers["wait"].visibility = "hidden";
document.layers["mypage"].visibility = "visible";
}
}
//--></script>
</head>
<body>
<div id="wait" style="position: absolute; top: 200; left: 200; visibility:
visible; font-size: 28pt; color: red;">
Loading... Please Wait.
</div>
<div id="mypage" style="position: absolute; visibility: hidden;">
<img src="image1.jpg" onLoad='showImage();'>
</div>
</body>
</html>On loading the HTML, the browser displays the temporary page because its visibility is set to visible. The image is not displayed, as its visibility is set to hidden. Once the image has fully loaded, the onLoad event triggers the showImage() function. This function checks to see which browser the viewer is using, and then issues the correct DHTML commands to hide the temporary page, and to show the image.
The above code is fine if you want to display the temporary page whilst one element is loading. But what if you want to show the temporary page whilst many images are loading? The simplest way is to create a function to check if all the images are loaded, and if so, then run the commands to show the page, and hide the temporary message.
We'll start the code by declaring a variable for each image we're loading (in this case, three). All of this code goes inbetween the <head></head> HTML tags. The variables are global, so they can be checked each time the checking function is run. Their initial values are false; i.e. the images haven't loaded yet.
var image_1 = false; var image_2 = false; var image_3 = false;
We will now create a function which is called as each image finishes loading. Each time it is called, it changes the corresponding variable of the image that called it to the value "true". The function then checks to see if all of the images' variables are true (i.e. if all the have images loaded), and if so, calls another function to display them and remove the temporary message.
function checkImage(whichimage) {
switch (whichimage) {
case 1:
image_1 = true;
break;
case 2:
image_2 = true;
break;
case 3:
image_3 = true;
break;
}
if (image_1 && image_2 && image_3) {
showPage();
}
}Now we create a function that will display the page. This function assumes the temporary page has the id of "wait", as with the first example. The rest of the page will be enclosed with <div> tags, with the id being "page"
function showPage() {
if (navigator.appName = "Microsoft Internet Explorer") {
document.all.wait.style.visibility = "hidden";
document.all.page.style.visibility = "visible";
}
else {
document.layers["wait"].visibility = "hidden";
document.layers["page"].visibility = "visible";
}
}The temporary message will have the same HTML as in the first example, but the rest of the HTML page has to be enclosed with the following tags:
<div id="page" style="position: absolute; left: 0; top: 0; visibility: hidden;"> <!-- Rest of page HTML goes here --> </div>
Each of the three images will have to have the following code:
<img src="image1.jpg" onLoad='checkImage(1);'> <img src="image2.jpg" onLoad='checkImage(2);'> <img src="image3.jpg" onLoad='checkImage(3);'>
This version doesn't check which browser the user is running. Instead it checks to see if the document.all or the document.layers objects exist. This is a better way of doing things, as it makes sure that style sheets aren't turned off. [Thanks to Martin Webb for this idea].
<head>
<script language="JavaScript">
<!--
function showImage(){
if(document.all){ //Checks to see if browser supports document.all
document.all.wait.style.visibility="hidden";
document.all.mypage.style.visibility="visible";
}
else{ //i.e. if the browser doesn't support document.all
if(document.layers){ //does browser support document.layers instead?
document.layers["wait"].visibility="hidden";
document.layers["mypage"].visibility="visible";
}
}
}
//-->
</script>
</head>
<body>
<div id="wait" style="position: absolute; top: 200; left: 200;
visibility: visible; font-size: 28pt; color: red;">
<script language="JavaScript">
<!--
if (document.all || document.layers){
document.write("Loading... Please Wait");
//This checks to see if the browser supports the object needed to create the
//loading page.
//It will only write the Loading message if the browser does support them
}
//-->
</script>
</div>
<div id="mypage" style="position: absolute; visibility: hidden;">
<img src="image1.gif" onLoad="showImage();">
</div>
If you wish to use the above code with multiple images, remember to make a checkImage() function like the one described above in multiple images.
Drag and Drop with Microsoft Internet Explorer 5
A Gift of "Life" : The Document Object Model
Multimedia in Microsoft Internet Explorer