Detener la imagen que se descargue cuando está en un teléfono inteligente

Question

Estoy desarrollando un sitio web receptivo para una empresa donde el sitio web de tamaño completo tiene una presentación de diapositivas con imágenes en segundo plano (completando la pantalla con Backstretch). Dado que las imágenes son bastante grandes (alrededor de 300k), estoy buscando una manera de evitar que las imágenes se carguen al ver el sitio en un teléfono inteligente.

He aplicado display: none y visibility: hidden en el div de contrafuerza con una consulta de medios. Oculta las imágenes, pero parece que todavía se están descargando. ¿Hay alguna manera inteligente de hacer que el navegador los ignore por completo?

Answer 1

Si está configurando la imagen mediante CSS, entonces hay una manera.

Si establece el div para mostrar: ninguno todavía se descarga, sin embargo si se establece el div padre para mostrar ninguno entonces no va a cargar hasta que se activa una consulta de medios para establecer

CSS

.parent {display:block;} 
.background {background-image:url(myimage.png);} 

@media only screen and (max-width:480px) { 
.parent {display:none;} 
} 

HTML

<div class="parent"> 
    <div class="background"></div> 
</div> 

Sombrero de punta a Tim Kadlec - http://timkadlec.com/2012/04/media-query-asset-downloading-results/

Answer 2

visibility y display no tienen nada que ver con la descarga de una imagen. Lo único que puede hacer es tener todas las imágenes como imágenes de fondo y usar una consulta de medios para excluirlas por completo en su hoja de estilo alternativa.

Answer 3

Otra opción es ir al primer enfoque de dispositivos móviles, definir los estilos predeterminados para dispositivos móviles y anularlos en consultas de medios para anchos de pantalla más grandes.

algo como lo siguiente evitará que la imagen que está siendo descargado en un dispositivo móvil, y también evita la necesidad de un div contenedor innecesaria :)

HTML:

<div class="container"> 
    <!-- slideshow container --> 
</div> 

CSS:

/* default to no background image */ 
.container { 
    background-image: none; 
} 

/* add it in for wider screens */ 
@media screen and (min-width: 500px) { 
    .container { 
     background-image: url(myimage.png); 
    } 
}