descarga imágenes ocultas

<style type="text/css"> 
    .hidden-image-container { 
     display: none; 
    } 
</style> 
<div class="hidden-image-container"> 
    <img src="lulcats.png" /> 
</div>

estoy interesado principalmente en lo que los navegadores móviles hacen que la optimización de no descargar una imagen que está en un contenedor oculto.descarga imágenes ocultas

Esto me permitiría reducir significativamente el tiempo de descarga inicial.

Fuente

2012-01-23 Raynos

Estoy bastante seguro de que la mayoría de los navegadores seguirán descargando un elemento "oculto", ya que se supone que el elemento oculto se utilizará en algún momento. Lo único que se me ocurre para evitar que la imagen se descargue de inmediato es eliminar la imagen de su div oculto, y luego usar div.innerHTML = img tag html, cuando desee que el cliente descargue la imagen. – ToddBFisher

Ver también https://stackoverflow.com/questions/12158540/does-displaynone-prevent-an-image-from-loading – Pino

Alguien ha probado esto antes:

http://www.w3.org/2009/03/image-display-none/test.php

Editar:
Parece que la lista no contiene muchos de los teléfonos navegadores (todavía).

Fuente

2012-01-23 15:10:07 user123444555621

Alguien lo haría tiene que decodificar esa lista de UA en una lista sensible visible de navegadores que sí y no. – Raynos

Tiene iPhone OS 2-5 y Android. Eso cubre la mayoría de los teléfonos móviles, ¿no? – ThinkingStiff

nunca lo llamaría un optimización de un navegador para no descargar una imagen oculta. Eso podría tener docenas de buenas razones y debería (y aún así) descargarse en un navegador. No tengo ninguna tabla de números o navegadores pero estoy casi seguro de que todos los navegadores móviles también descargarán dicha imagen tan pronto como el intérprete la vea.

Me temo que no hay una bala de plata para cargar de forma condicional etiquetas <img> con solo html/css. Ahora mismo necesitarás al menos una pequeña porción de ecmascript, pero como siempre, estoy muy seguro de que la comunidad de stackoverflow me corregirá si me equivoco aquí.

El nodo <img> no tiene propiedades como .preventLoad (que de hecho sería bastante útil). Quizás es el momento para una propuesta whatwg, me uniré y lo apoyo :-)

Fuente

2012-01-23 12:14:41 jAndy

Acepto que la descarga de la imagen es el comportamiento "correcto". FWIW, las imágenes creadas por JS siempre se cargan, incluso si no se agregan al árbol DOM (!): 'Document.createElement ('img'). Src = '//example.com/example.png';' – user123444555621

Respuesta

Cuestiones relacionadas