Q. How do I hide my page until everything is loaded (delay page
A. This is easier than you you may think. Simply cover your page
with a layer that is set to hide on page load.
Hide Page Until Loaded
Author's Site: Paragon
Reference ID: 15631
Placing The Layer
I think the biggest confusion people have with this concept is
hiding the layer using the onLoad event. Just to make sure, we will
cover all the bases. By this I mean I will go through placing the
layer on the page, setting its properties and applying the function/behavior
to hide the layer using an onLoad event/trigger.
I will assume you already have a page you want to apply this technique to,
so let's open that page up. I will use a screen shot for my content just to make
it a little easier on me ;^)
Here is my page:
OK. With the page open we will go to the "Objects" palette and select
the "Insert Layer" object.
TIP: You don't have to be perfect on your placement of the layer.
We will set its properties using the "Property Inspector".
Adjusting The Layers Properties
Now we need to select the layer so we can fine tune it with the "Property
Inspector" To do this we need to click on the tab at the top left of the
layer. Its the white thing in the image below.
Once that is done we can adjust its properties. Open the "Property Inspector"
and set the L, T, W, & H to the values you see below.
Tip: It is always a good idea to name your layers. Especially if
you have more than one on a page. It will help you identify what layer holds what
content. I named mine "Mask" for reasons that should be obvious.
Note: If you have more than one layer on the page make sure
that the Z-Index of your "Mask" layer is higher than any others on the
page so it will sit on the very top of the page.
Improving The Appearance
You're probably wondering how this is going to hide your content when you can
see right through it. Well, good question. Now for the answer.
Using the "Property Inspector", once again, we will give our layer
a background. For best results I would recommend using a color for the background
and not an image.
Note: Using an image can cause a flickering effect because
the layer will be transparent until the background image loads.
Tip: If you must use an image to match the page's background
(as I will do here) then use this simple work around. Set the background
of the layer to a color close to your background image. Then use
the image as the background for a table inside your layer.
Your page should now look something like this:
While this would do the trick to cover our content, I would recommend that
you put something in the layer so your visitors don't think they reached a blank
page and leave. I placed a table and a simple animated GIF that says "LOADING...."
inside the "Mask" layer. Simple enough, but it still lets everyone know
that something is going on.
Next We Are Going To Apply The Behavior