Saltar al contenido

Artículo

09 febrero 2015
Comunidad tecnológicaUX Avanzado

Ocultar imágenes sin que se carguen

Mujer parada de manos en la palabra EVOLVE
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

logo linkedin compartir en Linkedin Contacto

Otros artículos destacados

Ver todos nuestros artículos