css - query - responsive design tutorial

¿"Mostrar: ninguno" impide que una imagen se cargue? (17)

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

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

utilizar <img srcset>

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

La etiqueta HTML5 `<picture>` lo ayudará a resolver la fuente de imagen correcta dependiendo del ancho de la pantalla

Al parecer, 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 alternativa a las consultas de medios , solo podría ser útil cuando la imagen se configuró como fondo en el CSS.

Mientras pensaba que solo hay una solución JS para el problema ( carga diferida , picturefill , etc.), parecía que había una solución HTML pura que viene de la caja con HTML5.

Y esa es la etiqueta <picture> .

Así es como lo describe MDN :

El elemento HTML <picture> es un contenedor que se utiliza para especificar varios elementos <source> para un <img> 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 hiDPI).

Y aquí está cómo usarlo:

<picture> <source srcset="mdn-logo-wide.png" media="(min-width: 600px)"> <img src="mdn-logo-narrow.png" alt="MDN"> </picture>

La logica detras

El navegador cargaría la fuente de la etiqueta img , solo si no se aplica ninguna de las reglas de medios. Cuando el navegador no admite el elemento <picture> , volverá a mostrar la etiqueta img .

Normalmente, colocaría la imagen más pequeña como fuente de <img> y, por lo tanto, no cargaría las imágenes pesadas para pantallas más grandes. Y viceversa, si se aplica una regla de medios, la fuente de <img> no se descargará, sino que descargará el contenido de la URL de la etiqueta <source> correspondiente.

El único inconveniente aquí es que si el navegador no admite el elemento, 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 se excite demasiado, aquí está el soporte actual del navegador para <picture> :

Navegadores de escritorio

MDN

Navegadores móviles

Más información sobre la compatibilidad del navegador que puede encontrar en ¿Puedo usar ?

Lo bueno es que html5please''s oración html5please''s es usarlo con un respaldo . Y personalmente tengo la intención de seguir sus consejos.

Más sobre la etiqueta que puede encontrar en la especificación 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 de source , el atributo src del elemento de origen no tiene ningún significado cuando el elemento está anidado 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 varias URL.

Entonces, lo que dice es que solo te ayuda a mejorar el rendimiento al cargar una imagen, proporcionándole algún contexto.

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

<style> picture { display: none; } @media (min-width: 600px) { picture { display: block; } } </style> <picture> <source srcset="the-real-image-source" media="(min-width: 600px)"> <img src="a-1x1-pixel-image-that-will-be-hidden-in-the-css" alt="MDN"> </picture>

Por lo tanto, el navegador no mostrará la imagen y solo descargará la imagen de 1x1 píxeles, que se puede almacenar en caché si la usa más de una vez. De todos modos, realmente no se recomienda hacerlo, porque si la etiqueta no es compatible, incluso los navegadores de escritorio mostrarían solo la imagen de 1x1px.

El truco para usar la pantalla: ninguno con imágenes es asignarles una identificación. Aquí no se necesita mucho código para que funcione. Aquí hay un ejemplo usando consultas de medios y 3 hojas de estilo. Uno para teléfono, uno para tablet y otro para escritorio. Tengo 3 imágenes, la 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, una pantalla de escritorio en la imagen de la computadora de escritorio. Aquí hay un ejemplo de código para que funcione:

Código fuente:

<div id="content"> <img id="phone" src="images/phone.png" /> <img id="tablet" src="images/tablet.png" /> <img id="desktop" src="images/desktop.png" /> </div>

El teléfono CSS que no necesita una consulta multimedia. 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 del 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.

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

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

La imagen tiene una display:none estilo pero su tamaño es leído por el script. 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 computadora pequeña con CPU, no tener que renderizar la imagen (y el diseño de la página) hará que toda la operación de renderización sea más rápida, pero dudo que esto sea algo que realmente tenga sentido hoy en día.

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

EDITAR:

Los navegadores son cada vez más inteligentes. Hoy en día, su navegador (dependiendo de la versión) puede omitir la carga de la imagen si puede determinar que no es útil.

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

Pero me di cuenta de una buena solución. Primero haga una etiqueta img y luego cargue un 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 envoltorio de su elección.

<div class="test"> <img src="data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/‌svg%22/%3E" style="content:url(''https://blog.prepscholar.com/hubfs/body_testinprogress.gif?t=1495225010554'')"> </div> @media only screen and (max-width: 800px) { .test{ display: none; } }

Configure la envoltura para que no muestre ninguno en el punto de interrupción donde no desea cargar la imagen. El css en línea de la etiqueta img ahora se ignora, ya que el estilo de un elemento envuelto en una envoltura con pantalla no se ignorará, por lo tanto, la imagen no se carga, hasta que llega a un punto de interrupción donde la envoltura tiene un bloque de pantalla.

Ahí lo tienes, una forma realmente fácil de no cargar un img en el punto de interrupción móvil :)

Echa un vistazo a este código de código, para ver un ejemplo funcional: http://codepen.io/fennefoss/pen/jmXjvo

La imagen de fondo de un elemento div se cargará si el div está configurado 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:

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

En Chrome: Todas las 8 capturas de pantalla- * imágenes cargadas (img 1)
En Firefox: solo se carga la imagen 1 * captura de pantalla que se muestra actualmente (img 2)

Entonces, después de seguir investigando, encontré this , que explica cómo cada navegador gestiona la carga de activos img basados en la pantalla css: ninguno;

Extracto de la entrada 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 seguirán descargando activos de las etiquetas img.
Ópera:
Al igual que Firefox, Opera no cargará imágenes de fondo inútiles.
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 establecido en línea no se descargará ... Pero lo será si esos estilos no se aplican en línea.

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 en los que desea que se cargue su imagen. la imagen debe configurarse como una imagen de fondo de un div, etc. y NO una etiqueta, ya que la etiqueta de la imagen cargará la imagen independientemente de si el tamaño de la pantalla y el conjunto de consultas de medios.

Otra posibilidad es usar una etiqueta <noscript> y colocar la imagen dentro de la etiqueta <noscript> . Luego use javascript para eliminar la etiqueta noscript cuando necesite la imagen. De esta manera, puede cargar imágenes a pedido utilizando una mejora progresiva.

Utilice este polyfill que escribí para leer el contenido de las etiquetas <noscript> en IE8

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

Para evitar la obtención de recursos, use el elemento <template> de los Componentes Web .

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

Si no desea que se cargue, deje un DIV vacío donde pueda cargar html en él más adelante que contenga una etiqueta <img> .

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

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

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

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

Si convierte la imagen en una imagen de fondo de un div en CSS, cuando ese div esté configurado para "mostrar: ninguno", la imagen no se cargará. Cuando CSS está deshabilitado, todavía no se cargará, porque, bueno, CSS está deshabilitado.

Si la división principal está configurada en ''mostrar: ninguna'', la imagen no se cargará.

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

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

<div style="display:none;"><img src=http://dystroy.org/stripad/icon-v1.png id="test"></div> 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: /

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

Aquí hay un pequeño fragmento de código:

.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 visualización / visibilidad / opacidad, pero la imagen aún se estaba cargando, este fue el código más seguro que se nos ocurrió.

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

¿no sería entonces solo buscar la imagen por encima de un cierto ancho de pantalla?

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

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 esté configurada en otro valor.
Solo Opera descarga la imagen cuando se cambia la display para block . Todos los demás navegadores lo descargan inmediatamente.

Solo ampliando la solución de Brent.

Puede hacer lo siguiente para una solución CSS pura, también hace que el cuadro de img se comporte como un cuadro de img en una configuración de diseño sensible (para eso es el png transparente), que es especialmente útil si su diseño usa respuesta dinámica-dinámicamente redimensionar imágenes.

<img style="display: none; height: auto; width:100%; background-image: url(''img/1078x501_1.jpg''); background-size: cover;" class="center-block visible-lg-block" src="img/400x186_trans.png" alt="pic 1 mofo">

La imagen solo se cargará cuando se active la consulta de medios vinculada al bloque visible-lg y se muestre: ninguno se cambia para mostrar: bloque. El png transparente se usa para permitir que el navegador establezca relaciones de altura: anchura adecuadas para su bloque <img> (y, por lo tanto, la imagen de fondo) en un diseño fluido (altura: automática; anchura: 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 las imágenes del tamaño de la ventana gráfica de medios predeterminada se cargan durante la carga inicial y luego, según la ventana gráfica, las imágenes se cargarán dinámicamente.

Y no javascript!