Ok i have this problem, i made a huge 1600x1200 picture that cannot be adapted to be "tileable". So i want to keep it to it's 1.5 Meg in size for esthetic reason.

What i want to do is load that big picture in the background while the user sees another small image serving as temporary image background. As soon as my main big image is finish loading, it should replace the temporary mage background.

- Please don't tell me to use something smaller
- i also already know than i can put a background color that will be replace with the background picture, i don't want to use a unique color.

So, is it possible to do it using today's web technology like javascript or css ?

A big thanks to all of you.

Zenno

1.5mb...that will take dialup users like..10-15min to d/l....

http://excellhosting.net for all your hosting needs.

As i mentionned in my post, That is exactly the kind of response i did not want to hear my friend.

For your information, the website that it is intented for is a personal one, not public and all the persons that will have business surfing on it have all high performance computer with high speed internet access.

Regards.

u can put the image into the body tag as a PreLoad image, i think that will work...

Sign Me Guestbook!

jaymc.co.nr

Report Offensive Follow Up For Removal

A "Preload" image, humm, i'm afraid i don't know how to code that exactly.

And will this method will permit a previous and smaller background image to be loaded in the meantime ?

Zenno

You really shouldn't use an image that big. It will take forever to download and most people don't even have 1600 x 1200 resolution screens.

Hee hee...Gotcha. Just trying to get under your skin.

As to the question at hand, there are several ways to do it. I'm really not sure which would be the best, but here's the one that I would put money on working:

1. To achieve the smaller image "in the meantime" effect, just set the background image initially to the smaller image (Preferably using CSS, of course, but do what you want). No surprises there.
2. Have an image tag in a DIV that is invisible. Don't put in the src attribute.
3. In the BODY tag, have the onLoad event call a javascript function that sets the src attribute of the invisible image to your beastly picture.
4. In the image tag previously mentioned, set the onLoad event to yet another javascript function that, when called, sets the background image of the document to your beastly one.

If you follow the event sequence in you're head, you'll see that first the page loads with the small graphic. Once it all loads, then it starts to load the big graphic. Once the big graphic loads, it makes it the background image. It should happen pretty quickly.

I don't really have time to test this, and you seem like a smart enough fellow to be able to take it from here. Here's the structure of your page though:

[HTML]
[HEAD]
[SCRIPT language='javascript']
function setImgSrc()
{
myimg=document.getElementById('preload');
myimg.src='mybigfile.jpg';
}
function makeBG()
{
myimg=document.getElementById('preload');
//this func might get called when the page is first loaded, so we want to make sure we don't set the bg image prematurely
if (myimg.src != "")
document.style.backgroundImage=myimg.src;
}
[/SCRIPT]
[/HEAD]
[body onload=setImgSrc() background='mysmallpic.jpg']
regular page text here
([DIV style='display:none'][IMG name='preload' src="" onLoad='makeBG()'][/DIV]
[/body]
[/HTML]

P.S. A 1600 x 1200 image, in JPG format, shouldn't take up 1.5MB. My test graphic came out to 206KB. I assume you're talking non-compressed size.

Good luck
-SN

Hey !!!!

You know, i like your sense of humor....

This will be of a great help !!!

Thank you very much for taking the time for writing it all in details for me, I really appreciate it.....Gee..Peoples are so nice !!!

Thanks again !

Zenno.

Two mistakes in that one...it should be IMG id='preload', not name='preload'. There was also an extra parenthesis in front of the DIV.
-SN

As for the image, i could save it at quality 60 in Photoshop, but at that level, i'm starting to loose some visible quality.

Thanks

Ok, i will take note of the corrections.

(i forgot to mention, at quality 60, the file will be 450k)

It's not that the design on the background is very complex, it's just that the texture is made with the filter noise and i added a small lighting effect. Without the noise, it goes down to 4k in GIF format. With the noise alone it's up to 2.1 Megs in GIF format. No other choice than to use JPEG with a little compression.

Zenno

have you tried opening it in microsoft paint and then doing file > save as to jpg? you shouldn't lost much quality and it'll save the file at a much smaller size.. just a thought.

No, i did not. Because Photoshop offers a lot of compression options while saving for the web.

No, i just decided to remove the lighting effect in my background. It will be less apealing but that way my file is down to about 20k.

Thanks anyway.

thats kool. np

hmmm... 20k, it sounds like you dont even need a smaller image, because 56k can download that in about... 1 SECOND!

FBI_Agent