ansaurus

Question

Answer 1

A:

If the page elements and their background images are already in the DOM (i.e. you are not creating/changing them dynamically), then their background images will already be loaded. At that point, you may want to look at compression methods :)

cpharmston 2009-09-03 12:45:02

mmmm... good point cpharmston, and this explains why the issue persists even with the images cached. So, that does means there's no workaraound ?

Peanuts 2009-09-03 12:52:47

Create smaller images! JPEGs are easily compressed, there are command line tools for reducing the size of PNGs (http://pmt.sourceforge.net/pngcrush), and you can reduce the number of colors in the image to reduce the size of GIFs. Of course, you can also spring for faster internet service ;)

cpharmston 2009-09-03 13:02:17

Answer 2

+3 A:

try with this:

var c=new Image("Path to the background image");
c.onload=function(){
   //render the form
}

With this code you preload the background image and render the form when it's loaded

mck89 2009-09-03 12:51:35

mck89, thanks this looks pretty good. But, should I use this code inside the 'head' or inline ? I mean, must I fill it with html ?

Peanuts 2009-09-03 13:16:33

You must use it in the head. I think that you can use it inside the $(document).ready

mck89 2009-09-03 13:27:51

Answer 3

A:

how about loading that background image somewhere hidden. That way it will be loaded when the page is opened and wont take any time once the form is created using ajax:

body {
background: #ffffff url('img_tree.png') no-repeat -100px -100px;
}

Santi 2009-09-03 12:52:58

Answer 4

A:

Hi guys, I can confirm that my original code seems to work. I was casually sticking to an image with a wrong path.

Here's a test : http://paragraphe.org/slidetoggletest/test.html

Peanuts 2009-09-03 17:52:57

Answer 5

+2 A:

If you're reusing these bg images anywhere else on your site for form inputs, you probably want to use an image sprite. That way you can centrally manage your images (instead of having pic1, pic2, pic3, etc...).

Sprites are generally faster for the client, since they are only requesting one (albeit slightly larger) file from the server instead of multiple files. See SO article for more benefits:

http://stackoverflow.com/questions/1289372/css-image-sprites

Then again, this might not be helpful at all if you're just using these for one form and you really only want to load them if the user requests the contact form...might make sense though.

http://www.alistapart.com/articles/sprites

ajhit406 2009-09-03 21:26:43

Yes, CSS Sprites are the way to go. Just make sure that one of the images in that sprite appears before the hidden form is launched (like on page load).

Steve 2010-01-24 15:07:46

ansaurus

tags:

views:

answers:

Preloading CSS Background Images

related questions