Demora al cargar imágenes de fondo CSS

Question

Tengo algunas pestañas para mi sitio web donde la imagen de fondo cambia al hacer clic en ellas.

Sin embargo, cuando sobrevivo las pestañas la primera vez después de que el DOM se haya cargado, hay un ligero retraso antes de que se muestre la imagen estacionario, lo que produce un efecto discordante.

No sé cómo solucionar este problema, alguna idea? :)

Ejemplo en vivo aquí: http://jsfiddle.net/timkl/fjupq/ - la demora no es tan larga en el servidor de JSFiddle, pero todavía está allí.

Answer 1

La solución a esto es usar sprites en lugar de imágenes separadas.

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

puede utilizar una única imagen, y en lugar de cambiar la fuente de antecedentes sobre :hover, basta con cambiar la posición de fondo. De esta forma, toda la imagen se carga por adelantado.

Por ejemplo, echa un vistazo a la hoja de sprites de desbordamiento de pila:

• http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=4

Usted no tiene que llevarlo a este extremo, sólo puede tener una imagen que tiene tanto la normalidad y :hover estados, y moverlo a la izquierda/derecha o arriba/abajo.

Answer 2

Una solución simple es usar javascript para precargar la imagen. Incluir esto en el encabezado de la página:

<script type="text/javascript"> 
    var img = new Image(); 
    img.src = "http://dummyimage.com/200x10/000000/fff"; // background image 
</script>