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

Popular posts from this blog

java - activate/deactivate sonar maven plugin by profile? -

python - TypeError: can only concatenate tuple (not "float") to tuple -

java - What is the difference between String. and String.this. ? -