Posted By

aznprncritic on 02/04/07


Tagged

css hack preload images cache


Versions (?)

Who likes this?

163 people have marked this snippet as a favorite

jonhenshaw
damarev
Hirmine
basicmagic
1976dan
icarus
DataSquirrel
d4rk
SpinZ
Phoenix
cynic68
manub
rich13
marcoba
vali29
aziz
enono78
sp1r1t
adix
stoker
DFCNT
jmelgoza
vbert
joellevin
revmitcz
adamsimms
markor
gafsveno
RockwayBeach
JimiJay
kcmr
overhang
jamesming
blackabee
sudhakmy
esquareda
brent-man
Leech
sulfurito
salibaray
luggnagger
yosemite610
jelm
yuindustries
brother_maynard
nirva
enajenkins
tewoos
owais
teamnirvana
nreliu
irishsk
hamiltonmascioli
delarge
nb109
kopfgeist
ramnath
Hollow
tmbrenneke
broinjc
MamaLoca
maxvee8
matiit
muoto
GrillPhil
visualpropaganda
marvin_speakman
romamon
breezemaster
MicronXD
sultano
sspitler01
profpatsy
scarybeast
shabbar
eskey
bigredjoe
BeardyOne
xpoint
newpress
l1r
maikelnait
ckayra
alexteg
davidsi
dfaulty
jaxsonk
delikassap
redstorm
babel2675
ryanisinallofus
blackthorne
fyreflyX
stationstops
galofre
colingardom
d55beck
yves
sethetter
zwigby
osirisinternet
microbians
pchengsf
miceno
naeemnur
fauverism
corangar
athanassiadis
bobbym245
azipagan
cromozooom
jamiedollard
seanpowell
gelogenic
kevinmann
martins
trusktr
tigr
kubaitis
broikmann
tspitzr
aegony
michellebracken
CyKy
intothelight
deadlyhappy
samkamerer
silverskymedia
metthyn
TraceyM
kantiano
jdenmark
marco135
jillella
lawrencetaur
prit
rajashri78
gnitter
vehler
dajocko
alp
qubestream
thepiglovesyou
jondiscipulo
scilec
icecreamboyy
merritt212
Ideandro
stephcode
wirenaught
designspaceship
shalomfriss
leobetosouza
dixon
robotici
shockway
dop3
phongjalvn
rcraven
symsec
erikgeerling
atulkransingh
gunnard


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.

  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.