Preload background image

[Awesomexr]

I have tried various ways with javascript but none of them seem to work.

The background-image is quite big, and it loads after the content. I want it to load before the content. How would i approach this?

[marshian]

Why on earth would you want to do that?
I'll give you two possible solutions:
1. If you have an "enter" page, you could trigger loading the background image there. Code usable to "preload" an image on another page could be as follows:

<img src="my_image.jpg" style="display: none;">

2. Create a page with nothing on it, just the background image. Then use JavaScript to change the contents of the page when the page has loaded (body.onload). (Or use JavaScript to change the location to another page, using window.location.)

But seriously, why do you want to do this? Perhaps there are better options than preloading the background image.

[diabolo]

http://www.cryer.co.uk/resources/javascript/script3.htm

[suomiaol]

I want it to load before the content. How would i approach this?

I think you could try jQuery. My suggestion is you insert a white/non-transparent overlay div on top of your page and let your background load behind it. Once the background is done loading hide the overlay div. Check out the event-load function on jquery.com: http://docs.jquery.com/Events/load

Although, I'm trying to think how you could actually link the load function to a background image because your background image is declared in your CSS. Maybe you should have the overlay hide the whole page until whole window is done loading? Put a progress bar in the div and write e.g. loading to let your visitors know what is going on.

Also you might want to try compressing your image to make it load *much* faster. You can compress images free online at imageoptimizer.net. I have a photo site and I always compress all large images because the #1 reason people will leave your site is if it takes too long to load.

[slacker3]

Optimize all your images:
http://www.pngoptimizer.com

Saves 130k for the background image alone (still 233k..) without quality loss.
Consider using just an small part of the image and x-repeat it, this will decrease load times dramatically.


Giving it a second view, i've noticed you are using various image formats - it may be an good idea to convert them all to .png and use CSS sprites to reduce http requests. -> http://spritegen.website-performance.org