View Full Version : How can I make a page load in before showing up?

01-13-2004, 04:21 PM
I have a preload page that has light graphics, and would like for it to load in completely before showing up, instead of the picture appearing line by line. Obviously, I have a dial up connection and am targeting this preload page for those on dial up. I know several web sites that do this. It is probably very simple, but I am at a loss as to how to accomplish it. I appreciate any help you might be able to give. The site is www.si-productions.com , if anyone needs to look at specific code.

01-13-2004, 06:12 PM
I'm not too sure this is at all possible. Most images load immediately because they're small. You could resave it as a 'progressive encoded' jpeg, which will mean it'll start off blurry and get sharper as the download happens, or you could resave it with a lower quality. 11k seems a bit large for that small a picture.

01-13-2004, 10:11 PM
I can't connect to your site. What server are you using? IIS? Apache?

01-13-2004, 10:14 PM
A comma got tacked onto the www.si-productions.com link. I corrected it, so it should work now. Elaine

01-13-2004, 10:53 PM
You should try to lower the quality a bit and see if it still looks good. I am not sure that 'progressive encoded' solution would look professionnal.

Paul Jr
01-14-2004, 01:23 AM
Eh, wow, sorry about that, I misread your first post.

The only thing I can think of, is to wrap your entire layout, that means placing the start tag right after your body tag, and the end tag right before your closing body tag, in a <div>, and do something like this:

<div id="preload" style="visiblity:hidden;">
all of your content, ect., ect...


<body onload="document.getElementById('preload').style.visibility='visible';">

Although, this will mean that your whole site won't be visible to those who don't have JS enabled... :(

Eh, sorry, I'm a bit lost, but do you want your entire page to load like this, or just one/a few images?

01-14-2004, 01:25 AM
Thanks. I'll give it a shot.

01-14-2004, 01:27 AM
I'm sorry. I'm relatively new to forums, but a post I just read disappeared? Was something wrong?

01-14-2004, 04:23 AM
Paul, Jr,
Do you mean the page won't be visible until it loads in for non js browsers, or it won't be visible at all? Ever? If that is the case, I'll stick with a slow download.

01-14-2004, 05:06 AM
Use Paul's solution but document.write the <div> tag so that non-js browsers will still see the content.

<script type="text/javascript">
document.write('<div style="visibility:hidden">');

content here...

<script type="text/javascript">

01-14-2004, 12:52 PM
There are also ways of doing it server side. That's why I asked for you which server you were using. But if you wanna do that it would probably be better to ask the question in the ASP or PHP forum. The solution given here seems to be the more appropriate one to your site since you're pages are .htm ones (as far as I've seen).

01-14-2004, 05:47 PM
Thanks so much for the information. This will get me where I want to be. The reason I didn't answer the question about the server was simply that I don't have any idea. I am using strictly .htm pages. I put up pages for my family, and have never had "formal" training. I know enough to validate my html pages, but haven't the time to go into a full study of php or asp. I still have 8 children at home, 5 of whom are being home schooled. The older 3 don't require much help except for web pages!

If you'd like to visit our family pages they are at:


Thanks again!

01-14-2004, 09:55 PM
Hey having 8 children at home is much harder than learning PHP or ASP ;)

Good luck with your project.