¿”Display: none” impide que se cargue una imagen?

Cada tutorial de desarrollo de sitios web receptivo recomienda usar la display:none propiedad de CSS para ocultar el contenido de la carga en los navegadores móviles para que el sitio web cargue más rápido. ¿Es verdad? ¿ display:none carga las imágenes o todavía carga el contenido en el navegador móvil? ¿Hay alguna manera de evitar cargar contenido innecesario en navegadores móviles?

Esas imágenes están cargadas. El navegador, debido a la posibilidad de que un script verifique dinámicamente un elemento del DOM, no optimiza los elementos (o el contenido de los elementos).

Puede verificarlo allí: http://jsfiddle.net/dk3TA/

La imagen tiene una display:none estilo, pero el script lee su tamaño. También podría haberlo comprobado mirando la pestaña “red” de las herramientas de desarrollo de su navegador.

Tenga en cuenta que si el navegador está en una pequeña computadora con CPU, no tener que renderizar la imagen (y el diseño de la página) hará que toda la operación de renderizado sea más rápida, pero dudo que esto sea algo que realmente tenga sentido hoy.

Si desea evitar que la imagen se cargue, simplemente no puede agregar el elemento IMG a su documento (ni establecer el atributo IMG src en "data:" o "about:blank" ).

EDITAR:

Los navegadores se vuelven más inteligentes. Hoy su navegador (dependiendo de la versión) puede omitir la carga de la imagen si puede determinar que no es útil.

Si convierte la imagen en una imagen de fondo de un div en CSS, cuando ese div se establece en “display: none”, la imagen no se cargará. Cuando CSS está desactivado, todavía no se carga, porque, bueno, CSS está desactivado.

La respuesta no es tan fácil como un simple sí o no. Mira los resultados de una prueba que hice recientemente:

  • En Chrome: todas las 8 imágenes de captura de pantalla * cargadas (img 1)
  • En Firefox: solo se carga la imagen de captura de pantalla 1 * que se está mostrando actualmente (img 2)

Entonces, después de seguir investigando, encontré esto , que explica cómo maneja cada navegador cargar elementos img basados ​​en la visualización CSS: ninguno;

Extracto de la publicación del blog:

  • Chrome y Safari (WebKit):
    WebKit descarga el archivo cada vez, excepto cuando se aplica un fondo a través de una consulta de medios no coincidente.
  • Firefox:
    Firefox no descargará la imagen llamada con la imagen de fondo si los estilos están ocultos, pero todavía descargarán activos de las tags img.
  • Ópera:
    Al igual que Firefox, Opera no cargará inútiles imágenes de fondo.
  • Explorador de Internet:
    IE, como WebKit descargará imágenes de fondo incluso si tienen pantalla: ninguna; Algo extraño aparece con IE6: Elementos con una imagen de fondo y una pantalla: ninguno configurado en línea no se descargará … Pero lo serán si esos estilos no se aplican en línea.

Chrome- Las 8 imágenes de captura de pantalla * se cargaron

Firefox: solo se carga la imagen de captura de pantalla 1 * que se está mostrando actualmente

La etiqueta HTML5 te ayudará a resolver el origen de la imagen correcta según el ancho de la pantalla

Aparentemente, el comportamiento de los navegadores no ha cambiado mucho en los últimos 5 años y muchos todavía descargarían las imágenes ocultas, incluso si hubiera una display: none propiedad establecida en ellas.

Aunque hay una solución de consultas de medios , solo podría ser útil cuando la imagen se configuró como fondo en el CSS.

Mientras pensaba que solo había una solución de JS para el problema ( carga diferida , relleno de imagen , etc.), parecía que había una buena solución de HTML puro que salía de la caja con HTML5.

Y esa es la etiqueta .

Así es como lo describe MDN :

El elemento HTML es un contenedor utilizado para especificar múltiples elementos para un específico contenido en él. El navegador elegirá la fuente más adecuada de acuerdo con el diseño actual de la página (las restricciones del cuadro en el que aparecerá la imagen) y el dispositivo en el que se mostrará (por ejemplo, un dispositivo normal o hiPDI).

Y aquí está cómo usarlo:

   MDN  

La lógica detrás

El navegador cargaría la fuente de la etiqueta img , solo si no se aplica ninguna de las reglas de medios. Cuando el elemento no es compatible con el navegador, volverá a mostrar la etiqueta img .

Normalmente pondría la imagen más pequeña como fuente de y, por lo tanto, no cargaría las imágenes pesadas para pantallas más grandes. A la inversa, si se aplica una regla de medios, la fuente de no se descargará, sino que descargará los contenidos de la url de la correspondiente etiqueta .

El único inconveniente aquí es que si el elemento no es compatible con el navegador, solo cargará la imagen pequeña. Por otro lado, en 2017 deberíamos pensar y codificar en el primer enfoque móvil .

Y antes de que alguien salga demasiado, aquí está el soporte actual del navegador para :

Navegadores de escritorio

Soporte para navegadores de escritorio

Navegadores móviles

Soporte para navegadores móviles

Obtenga más información acerca del soporte de navegador que puede encontrar en ¿Puedo usar ?

Lo bueno es que la oración de html5please es usarlo con un respaldo . Y personalmente bash tomar su consejo.

Más sobre la etiqueta que puedes encontrar en las especificaciones del W3C . Hay un descargo de responsabilidad allí, que me parece importante mencionar:

El elemento de picture es algo diferente de los elementos de audio y video aspecto similar. Si bien todos ellos contienen elementos source , el atributo src del elemento fuente no tiene ningún significado cuando el elemento está nested dentro de un elemento de picture , y el algoritmo de selección de recursos es diferente. Además, el elemento de picture sí no muestra nada; simplemente proporciona un contexto para su elemento img contenido que le permite elegir entre múltiples URL.

Entonces, lo que dice es que solo le ayuda a mejorar el rendimiento al cargar una imagen, al proporcionarle contexto.

De todos modos, aún puedes intentar hacer un hack dudoso para ocultar la imagen en dispositivos pequeños:

    MDN  

Por lo tanto, el navegador no mostrará la imagen y solo descargará la imagen de 1×1 píxeles, que puede almacenarse en caché si la usa más de una vez. De todos modos, no es recomendable hacer eso, porque si la etiqueta no es compatible, incluso los navegadores de escritorio mostrarán solo la imagen 1x1px.

Sí, se renderizará más rápido, ligeramente, solo porque no tiene que representar la imagen y es un elemento menos para ordenar en la pantalla.

Si no desea que se cargue, deje un DIV vacío donde puede cargar html y luego contener una etiqueta .

Intente usar firebug o wireshark como he mencionado antes y verá que los archivos SI se transfieren incluso si aparece en la display:none hay display:none presente.

Opera es el único navegador que no cargará la imagen si la pantalla está configurada en none. Opera ahora se ha movido a webkit y renderizará todas las imágenes, incluso si su pantalla está configurada en none.

Aquí hay una página de prueba que lo probará:

http://www.quirksmode.org/css/displayimg.html

Modo Quirks: imágenes y visualización: ninguna

Cuando la imagen tiene display: none o está dentro de un elemento con display:none , el navegador puede optar por no descargar la imagen hasta que la display se configure en otro valor.

Solo Opera descarga la imagen cuando cambia la display a block . Todos los demás navegadores lo descargan de inmediato.

Si convierte la imagen en una imagen de fondo de un div en CSS, cuando ese div se establece en ‘display: none’, la imagen no se cargará.

Simplemente expandiendo la solución de Brent.

Puede hacer lo siguiente para una solución de CSS pura, también hace que la caja de img se comporte realmente como un cuadro de img en una configuración de diseño receptivo (para eso es el png transparente), que es especialmente útil si su diseño utiliza una respuesta dinámica cambio de tamaño de las imágenes.

  

La imagen solo se cargará cuando se active la consulta de medios vinculada a visible-lg-block y se muestre: none se cambia para mostrar: block. El png transparente se utiliza para permitir que el navegador establezca la altura adecuada: la relación de ancho para su bloque (y por lo tanto la imagen de fondo) en un diseño fluido (alto: automático, ancho: 100%).

 1078/501 = ~2.15 (large screen) 400/186 = ~2.15 (small screen) 

Así que terminas con algo como lo siguiente, para 3 vistas diferentes:

    

Y solo se cargarán las imágenes de tamaño de ventana de medios predeterminadas durante la carga inicial, y luego, dependiendo de su ventana gráfica, las imágenes se cargarán dinámicamente.

Y no javascript!

La imagen de fondo de un elemento div se cargará si el div se establece do ‘display: none’.

De todos modos, si ese mismo div tiene un padre y ese padre está configurado para ‘mostrar: ninguno’, la imagen de fondo del elemento hijo no se cargará . 🙂

Ejemplo usando bootstrap:

  
lg
md
sm
xs

Para evitar la búsqueda de recursos, use el elemento de los componentes web .

Si es así, ¿hay alguna forma de no cargar el contenido innecesario en los navegadores móviles?

use

http://www.webdesignerdepot.com/2015/08/the-state-of-responsive-images/

Otra posibilidad es usar una etiqueta y colocar la imagen dentro de la etiqueta . Luego use javascript para eliminar la etiqueta noscript ya que necesita la imagen. De esta forma, puede cargar imágenes a pedido con la mejora progresiva.

Utilice este polyfill que escribí para leer los contenidos de las tags en IE8

https://github.com/jameswestgate/noscript-textcontent

Use @media query CSS, básicamente, solo lanzamos un proyecto donde teníamos una enorme imagen de un árbol en el escritorio al costado, pero no se mostraba en la tabla / pantallas móviles. Así que evitar que la imagen se cargue es bastante fácil

Aquí hay un pequeño fragmento:

 .tree { background: none top left no-repeat; } @media only screen and (min-width: 1200px) { .tree { background: url(enormous-tree.png) top left no-repeat; } } 

Puede usar el mismo CSS para mostrar y ocultar con display / visibility / opacity pero la imagen aún se está cargando, este fue el código más seguro que se nos ocurrió.

Hola chicos, estaba luchando con el mismo problema, cómo no cargar una imagen en el móvil.

Pero descubrí una buena solución. Primero crea una etiqueta img y luego carga una svg en blanco en el atributo src. Ahora puede configurar su URL a la imagen como un estilo en línea con contenido: url (‘enlace a su imagen’) ;. Ahora envuelva su etiqueta img en un contenedor de su elección.

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

Configure el contenedor para que no muestre ninguno en el punto de corte donde no desea cargar la imagen. El css en línea de la etiqueta img ahora se ignora, ya que se ignorará el estilo de un elemento envuelto en un contenedor con display none, por lo tanto, la imagen no se cargará hasta que llegue a un punto de corte donde el contenedor tiene bloque de visualización.

Ahí va, una manera realmente fácil de no cargar un img en el punto de interrupción móvil 🙂

Consulte este codepen, para ver un ejemplo de trabajo: http://codepen.io/fennefoss/pen/jmXjvo

No. La imagen se cargará como de costumbre y seguirá utilizando el ancho de banda del usuario si está considerando el ahorro de ancho de banda del usuario del teléfono móvil. Lo que puede hacer es usar la consulta de medios y filtrar los dispositivos que desea que cargue su imagen. la imagen debe establecerse como una imagen de fondo de un div, etc. y NO como una etiqueta, ya que la etiqueta de la imagen cargará la imagen independientemente de si el tamaño de la pantalla y la consulta de medios se configuraron.

estamos hablando de imágenes que no se cargan en el móvil, ¿verdad? ¿Y qué pasa si acaba de hacer un @media (min-width: 400px) {background-image: thing.jpg}

¿No buscaría entonces la imagen por encima de un determinado ancho de pantalla?

El truco para usar la pantalla: ninguno con imágenes es asignarles una identificación. Esto estaba allí, no se necesita mucho código para hacerlo funcionar. Aquí hay un ejemplo usando consultas de medios y 3 hojas de estilo. Uno para teléfono, uno para tableta y uno para escritorio. Tengo 3 imágenes, imagen de un teléfono, una tableta y un escritorio. En la pantalla de un teléfono solo se mostrará una imagen del teléfono, una tableta mostrará solo la imagen de la tableta, aparecerá un escritorio en la imagen de la computadora de escritorio. Aquí hay un ejemplo de código para que funcione:

Código fuente:

 

El teléfono CSS que no necesita una consulta de medios. Es el teléfono img # que lo hace funcionar:

 img#phone { display: block; margin: 6em auto 0 auto; width: 70%; } img#tablet {display: none;} img#desktop {display: none;} 

La tableta css:

 @media only screen and (min-width: 641px) { img#phone {display: none;} img#tablet { display: block; margin: 6em auto 0 auto; width: 70%; } } 

Y el css de escritorio:

 @media only screen and (min-width: 1141px) { img#tablet {display: none;} img#desktop { display: block; margin: 6em auto 0 auto; width: 80%; } } 

Buena suerte y déjame saber cómo funciona para ti.

Si parent div está establecido en ‘display: none’, la imagen no se cargará.

Dado que casi todos los sitios web cumplen la función de respuesta ocultando los padres div, esta es probablemente la respuesta que está buscando.

Échale un vistazo – http://jsfiddle.net/v8eu39fL/1/

 
alert("image width: " + $('#test').width());

Probado en FF, Chrome, IE.

Editar: el navegador descarga la imagen de todos modos, ahora veo la conexión en la pestaña Red: /