Blog  //  Febrero 2015  //  Ocultar imágenes sin que se carguen

Ocultar imágenes sin que se carguen

Si hay un método que se desaconseja para ocultar imágenes cuando utilizamos media queries, ese es el display:none. La razón es simple, y es que aunque le indiquemos al navegador que no muestre la imagen, éste la descargará de todas maneras (a excepción de Opera Mini y Opera Mobile).
 
He dado con un estudio curioso (http://timkadlec.com/2012/04/media-query-asset-downloading-results/) donde se han realizado tests con varios métodos  para ocultar imágenes y la verdad es que algunos resultados son sorprendentes.

Por ejemplo, si intentamos ocultar una imagen de fondo con el mismo método del display:none obtendremos el mismo resultado: el servidor la carga de todas formas. A menos que (y ahora viene lo bueno!) en vez de poner el fondo a ese elemento, se lo pongamos a su hijo y ocultemos el elemento padre.
Ejemplo del div padre con fondo:
<div id="test2">div>

#test2 {

    background-image:url('images/test2.png');

    width
Escrito por:
BABELCreativa
Publicado el 09/02/2015 por BABEL | con 0 comentarios
Comentarios:
Esta publicación no tiene comentarios.
 Security code