Comments on Preload Images with CSS - AddedBytes.com

Comment on Preload Images with CSS

Comment by Joel G ( http://www.jagdesignideas.com )

After reading all this and *most* of the comments, I tried just adding div wrappers around my list items, and adding the rollover background to them with an id tag.

My challenge was that I'm building a list of categories (for my portfolio) as a navigation for the portfolio categories. But I'm using my text in the images, so I need separate backgrounds for each category, being 9 total.

So what I did and seemed to work out well was to wrap each

tags, and give each a separate id, such as:

...then target each one with just a CSS rule for the background image.

Now, instant rollovers, no flicker!

Comment on Preload Images with CSS

Comment by Bjorn Enki ( http://www.bjornenki.com )

A technique that I use drastically reduces the number of HTTP requests required for image preloading in addition to eliminating the need for any additional code to preload images. I've written a brief post on it here: http://www.bjornenki.com/blog/preload-roller-images-without-css-javascript

Comment on Preload Images with CSS

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

well after reading all this I ended using an iframe for our company site http://www.teamquest-inc.com.ph , this is because I need to preload more than ten image and a swf/flash file that will be used in other page of my site, so in the home page i insert iframe in a div position off screen. this works for our company site.

Comment on Preload Images with CSS

Comment by Rakesh ( )

I am facing a totally opposite issue :) Is there a way to "prevent" loading of images until some action. I have a div which has 100+ images in it. I want to show the div only on some action by the user. Even though the div has display:none set, the images gets preloaded. Is there a way to solve this ?

Comment on Preload Images with CSS

Comment by Joseph ( http://www.albaedit.com )

I have been using CSS display:none effectively (.hiddenPic {display:none;}, but I'm not testing with any older browsers, which is a worry.

I just tried #39 (Dameian) and it works fine for everything EXCEPT Chrome, which puts the little 10x10 icons of the images in the lower left corner, obviously not processing the -1000 positions.

I then added the .hiddenPic class to the img lines, and now even Chrome is handling it correctly, as expected since it is the new kid on the block.

Thanks, all. Great site.
Joseph

Comment on Preload Images with CSS

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

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

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

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. ILove[redacted].com!

Comment on Preload Images with CSS

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

thanks!! nice one