Ross said:
This page I am trying to create a preloader that hides all the
other content except the hidepage div until it loads...any ideas?
(I do not know if you try to preload images or simple want to hide the
content until it is fully loaded [which is no preloading whatsoever],
so my reply addresses both.)
Do not walk into this pitfall in the first place, like I once did. Consider
how this approach will affect the responsiveness of your site/document,
especially on slower machines and slower Internet connections. You do not
know how the document will be accessed and you cannot change that; you do
not know the cache settings and you cannot change them either, so you do
not even know that the advantage of speeding up the display process later
is worth the big disadvantage of slowing it down first by possible
synchronous requests due to preloading. Users tend to be quite impatient
when resources are loaded (ref. World Wide Waiting), and they will leave if
it takes too long.
Therefore, any preloader should be triggered onload the `body' element of
the document that contains the data to be preloaded, so that _hopefully_
preloading is done asynchronously and does not interfere with what users
expect: that the document is loaded step by step and they can at least see,
if not access, already loaded content while the rest is still loading.
This means if you simply want to hide all the document's content until it is
fully loaded, just do not do it. A reasonable approach is to display the
"please stand by" or whatever message somewhere where it would not even
interfere with the content if CSS was not supported. And then there is URL
prefetching which works without client-side scripting on supporting UAs --
where, last but not least, client-side scripting can be disabled or not
even be supported anyway and a preloader would not even work.
HTH
PointedEars
