Your Ad Here

advanced code snippet search

CSS Image Preloader

 / Published in: CSS
 

A low-tech but useful technique that uses only CSS. After placing the css in your stylesheet, insert this just below the body tag of your page: "". Whenever the images are referenced throughout your pages they will now be loaded from cache.

Expand | Embed | Plain Text 
  1. #preloadedImages {
  2.        width: 0px;
  3.        height: 0px;
  4.        display: inline;
  5.        background-image: url(path/to/image1.png);
  6.        background-image: url(path/to/image2.png);
  7.        background-image: url(path/to/image3.png);
  8.        background-image: url(path/to/image4.png);
  9.        background-image: url();
  10. }

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: wrburgess on February 13, 2009

Are there any minuses to this technique?

Posted By: dsntos on February 28, 2009

Or you could place the images inside a div and hide that div using css.

Posted By: cshaiku on June 30, 2009

The only downside is if you're using the stylesheet on other parts of your website where you do not need those preloaded images.

It is in fact just as easy (and more flexible given what images you require for different parts) to use a div on the page itself and hide that div in a class as such:

.preloader { display: none; }

Posted By: smoothdzion on November 4, 2009

I've been using image sprite a lot more lately and they seem to help quite a bit but they are usually bigger in size.

http://css-tricks.com/css-sprites/

This seems like a great way of loading multiple images though. I agree with using display:none for sure.

Posted By: buzzknow on September 17, 2010

i think its better using sprite, rather than load multiple images :)

Posted By: aamirrajpoot on January 25, 2011

I agree with sprites, as it will send less requests to server means more fast response.

It has its pros and cons

Pros is like showing slideshow something, and sprite is good for small images

Posted By: diolt on July 22, 2011

That's the wonderful creation, i would really try this. thanks dear :)

You need to login to post a comment.