CSS based image preloader doesn't work -
i wanted create preloader download images before showing website, later needed switch <img>
css-styled ul
-s , after stopped working - browser doesn't wait images load.
html:
<head> [...] <ul id="imgpreloader"> <li></li> <li></li> <li></li> <li></li> </ul> [...] </head>
css :
#imgpreloader { display:none; } #imgpreloader li:nth-child(1) { background-image: url('...'); } #imgpreloader li:nth-child(2) { background-image: url('...'); } #imgpreloader li:nth-child(3) { background-image: url('...'); } #imgpreloader li:nth-child(4) { background-image: url('...'); }
this because have set display:none
. think many browsers not load background image if display none though load source of non-displayed img element.
instead of setting display:none
, try this:
#imgpreloader { visibility:hidden; position:fixed; }
this should accomplish same thing in prevent elements displaying , affecting layout, should force browser load background images.
Comments
Post a Comment