Comments on Preload Images with CSS - AddedBytes.com

Comment on Preload Images with CSS

2008-10-02T18:56:01+01:00

Comment by George ( http://www.gcalderon.com )

A co-worker of mine suggested using CSS sprites technique (http://alistapart.com/articles/sprites/), since the bg image is loaded when you load the pre-hover state of the element, all you would need to do is specify background positioning for the css hover declaration.

Comment on Preload Images with CSS

2008-06-26T13:46:34+01:00

Comment by Dameian ( http://www.dameian.com )

Here is what I do. If this helps anyone, terrific... I'll go buy myself a snickers bar and feel all fuzzy inside. If not... I'll sink into a deep depression and rock back and forth in the darkest corner of my office muttering "Mad Word" by Tears for Fears...

In my CSS:

#preloader {
position:absolute;
top:-1000px;
height:100px;
width:100px;
overflow:hidden;
}

Then at the very top of my page under the body tag:

etc...

This will not be visible on your pages, and *should* take care of any browsers that do not render images if a "0" size is given to them or if they are "hidden".

I actually use this to eliminate the delay that browsers seem to have loading CSS background images but I can't see how it wouldn't work for rollover images as well.

I have tested this using FF and Safari on Mac as well as IE6 and IE7 on Windows. I have not tested it in the lesser used browsers because, truth be told, shooting myself in the face right this second with a 12 gauge shot gun would be a more joyous alternative to the self-torture I'd subject myself too if I tried to please the logic/rendering engines of every single browser. In the words of the late, great Bob Marley: "You can't fool all the people all the time..."

Cheers!

Comment on Preload Images with CSS

2008-06-09T23:58:14+01:00

Comment by itruscan ( http://www.webchiator.exofire.net/newdoc/ )

joel watson #preload { height: 0; overflow: hidden; }

what to put inside ???

Comment on Preload Images with CSS

2008-05-04T08:36:28+01:00

Comment by Adaptiv Media ( http://www.adaptivmedia.com/ )

This is absolutely brilliant. I have been searching for a non-javascript solution to do this for ages. Cannot thank you enough. ILoveilovejackdaniels.com!

Comment on Preload Images with CSS

2008-04-18T12:51:58+01:00

Comment by Jad ( http://www.anahaifa.com )

thanks!! nice one

Comment on Preload Images with CSS

2008-01-07T01:38:21+00:00

Comment by luispunchy ( http://www.luispunchy.com )

#34 touched on the issue of IE flicker. In the first technique (the Pixy method: one image with both states, revealed by background position), IE can flicker b/c that browser pings the server for the image again (even though it shouldn't).

The same fix should work. Apply the same background image, in hover state position, to the element's parent. In that instant while the image flickers on hovering the element, the parent's copy of the image rollover will be there to save the day. This works best with simpler designs, of course.

For example:

hover me

/* background image */
a, a:link, a:visited {background:url(image.gif) 0 0 no-repeat;}
a:hover {background-position:0 -50px;} /* image moved up whatever distance needed */

/* background image in rollover position, applied to parent element */
p {background:url(image.gif) 0 -50px no-repeat;}

Also, a few earlier comments noted another problem with that fact that IE doesn't apply the :hover pseudo-class to anything else but tags. There is a behavior file out there that fixes this - search for "csshover.htc", problem solved!

Comment on Preload Images with CSS

2007-09-11T06:25:47+01:00

Comment by LCTPAdmin ( http://lowcosttradingpost.com/ )

This method works most of the time but when you are working with multiple layers or two different images in IE you will sometimes get flicker. If you load a wrapper with the same image (in my case I used a table td around a nested div identically sized) you can fool IE. Basically it is smoke and mirrors. In the gap between the time it takes the image to change you just show a repeat of the first image.

If you are real sharp I guess you can code in a browser detection so that Firefox doesn't pay for IE's slow transitions.

Thanks Dave! I have enjoyed your site again and again! Just like my JD!

Comment on Preload Images with CSS

2007-07-25T14:59:56+01:00

Comment by Carrousel Yacht ( http://carrouselyacht.com )

Thanks for sharing this idea, I was looking for a css preload technique for my image rollover menus. I appreciate the help!

Comment on Preload Images with CSS

2007-04-05T00:33:00+01:00

Comment by gcyrillus ( )

i came up with the same idea for preload in css , there is so many tags with no backgrounds that it is quiet easy to insert.
Very useful for roll overs in menu with hidden text .
img tags can as well hold css preload in their backgrounds :).

For the display:none; option , i might remenber that netscape will not preload the background , following strictly the rule display:none; it will not care about it at all.
beside the height:0; overflow:hidden; and z-index:-1 (for opera) works fine too to hide somethings , but it could become extra tags ... where using empty backgrounds makes it easier :)

great site !

GC

Comment on Preload Images with CSS

2007-03-23T17:33:24+00:00

Comment by Shawn ( http://www.carptool.com )

I came up with the following solution for may site

.loadbg {
display:none;
height: 0px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;}