Preload HTML Site
The situation is I have a website with alot of images although overall the site only take 8-10 secs to load, I don't like the graphics loading seperately i'd rather have the whole site hidden until comletely loaded.
Any help will be greatly appreciated cheers
INsomNiac
The Webmistress posted this at 08:50 — 22nd June 2002.
She has: 5,586 posts
Joined: Feb 2001
Welcome to TWF,
I don't know if there is a way in html of hiding everything until all images are loaded but one way is to have a page with a preloading script in it which then after a certain time diverts to the actual page you want seen and the images will already be in the browsers cache so will appear fast.
Julia - if life was meant to be easy Michael Angelo would have painted the floor....
Abhishek Reddy posted this at 13:44 — 22nd June 2002.
He has: 3,348 posts
Joined: Jul 2001
I think you could hide all the images using the visibility:hidden CSS property, and change it to visible upon onLoad of the page using JavaScript.
But I'm not sure if the onLoad event accounts for images as well as HTML. If no on else has any ideas, I'll have a look into it later today and post back.
Suzanne posted this at 19:38 — 22nd June 2002.
She has: 5,507 posts
Joined: Feb 2000
If you do manage to do that, you'll lose more visitors than you'll impress by not having the images load in afterwards.
The ideal is to have the text be there instantaneously while the images load so people don't leave.
You're sacrificing use to your ego. Don't do it.
insomniac posted this at 13:51 — 23rd June 2002.
They have: 4 posts
Joined: Jun 2002
OK I understand what ur saying but what I want mainly is to have the images load all in one go not one by one, as it looks very ugly watching each image load down the screen.
Suzanne posted this at 01:39 — 24th June 2002.
She has: 5,507 posts
Joined: Feb 2000
well you have a few options --
1. use less images.
2. accept it.
3. optimize your images so they load faster
4. preload the images in your tag using Javascript (an array) -- this will result in delays in loading if you have bloated images.
5. use lowsrc images (may not be forward compatible, I don't use it so I don't know the current code/status of this feature).
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.