DHTML Widgets 5

At times you may not want a visitor to your Web page, see

its contents till the entire text and graphics have been downloaded. Here’s a simple

trick to do this–display a loading screen which changes when the complete page is

downloaded.

The CSS COLOR="#000000">

We begin by defining two layers.

The first layer, called loading, is seen while the page

loads and the other layer, content, contains the text and graphics of your page. Note here

that the Z-INDEX of "loading" is greater than that of the "content".

This ensures that the loading layer is on top of the content layer. COLOR="#ff0000">

The JavaScript COLOR="#000000">

The global variables and cross

browser variables are defined in exactly the same manner as described in DHTML Widgets #3

(PCQ March 1999, page 160). Other than that, we need two small functions to hide and show

the layers.

function showLayer(layerName){

eval(layerRef+’<"‘+layerName+’">’+

styleSwitch+’.visibility="visible"’);



}


function hideLayer(layerName){
eval(layerRef+’<"‘+layerName+’">’+

styleSwitch+’.visibility="hidden"’);



}

Each of these functions will take a layer name as a

parameter, and set the "visibility" attribute of the passed layer to visible or

hidden respectively.

The HTML COLOR="#000000">

This trick works because we’ve

an onLoad event handler which calls showLayer() function with "content" as

parameter, and calls hideLayer() function with "loading" as parameter. You add

the onLoad event handler as follows:

showLayer(‘content’);">

Then add the following lines to HTML:

This creates the two layers which we defined earlier.

Needless to say that the content layer should contain all the text and graphics of your
page.

Suggested enhancements COLOR="#000000">

Try putting some lightweight text

animation in the loading layer which the visitor can watch while the rest of the page

loads.