how to really preload an image before content?

by **5thavenu** on Sat Feb 28, 2009 1:26 pm

in fact how to achieve this sequence:

1) user requests index.html, style css
2) preloading image.jpg
3) loading and displaying content in <body></body>

these things didn't work for me:

<SCRIPT LANGUAGE="JavaScript">

Image1= new Image(498,527)
Image1.src = "body_bg-contacts.jpg"

</SCRIPT>

and

#preload img
{
height: 0; width: 0; border-width: 0;
position: absolute;
bottom: 0;
left: 0;
z-index: -30;
}

<div id="preload"><img style="visibility:hidden;position:absolute;top:-1000px;left:-1000px;" src="images/body_bg-res.jpg" /></div>

When I used the above or similar I still had smaller images and buttons loading before my main body_bg-contacts.jpg was actually loaded.

Any ideas of how to really control image preload?

I've tried some css and javascript codes, but as I said the MAIN IMAGE is not being loaded first.

by **igjoe** on Sat Feb 28, 2009 2:34 pm

Hmm I don't know for sure... but try doing a few google searches. Here is one that I found

http://www.htmlgoodies.com/tutorials/we ... #preimages

best of luck!

by **5thavenu** on Mon Mar 02, 2009 3:48 am

thank you for the reply

I finally worked it out by placing the code

#preload img
{
height: 0; width: 0; border-width: 0;
position: absolute;
bottom: 0;
left: 0;
z-index: -30;
}

<div id="preload"><img style="visibility:hidden;position:absolute;top:-1000px;left:-1000px;" src="images/body_bg.jpg" /></div>

AFTER the </body> tag

how to really preload an image before content?

how to really preload an image before content?

Re: how to really preload an image before content?

Re: how to really preload an image before content?

Who is online