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.
#preloadedImages { width: 0px; height: 0px; display: inline; background-image: url(path/to/image1.png); background-image: url(path/to/image2.png); background-image: url(path/to/image3.png); background-image: url(path/to/image4.png); background-image: url(); }
Comments
Subscribe to comments
You need to login to post a comment.

Are there any minuses to this technique?
Or you could place the images inside a div and hide that div using css.
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; }
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.
i think its better using sprite, rather than load multiple images :)
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
That's the wonderful creation, i would really try this. thanks dear :)