¿"Display:none" impide que se cargue una imagen?
Cada tutorial de desarrollo de sitios web responsivos recomienda usar la display:nonepropiedad CSS para ocultar la carga del contenido en los navegadores móviles para que el sitio web se cargue más rápido. ¿Es verdad? ¿ No display:nonecarga las imágenes o aún carga el contenido en el navegador móvil? ¿Existe alguna forma de evitar la carga de contenido innecesario en los navegadores móviles?
Los navegadores son cada vez más inteligentes. Hoy en día, su navegador (según la versión) puede omitir la carga de la imagen si determina que no es útil.
La imagen tiene un display:noneestilo pero su tamaño puede ser leído por el script. Chrome v68.0 no carga imágenes si el padre está oculto.
Puede comprobarlo allí: http://jsfiddle.net/tnk3j08s/
También podrías haberlo comprobado mirando la pestaña "red" de las herramientas de desarrollo de tu navegador.
Tenga en cuenta que si el navegador está en una computadora con CPU pequeña, no tener que renderizar la imagen (y diseñar 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 en día.
Si desea evitar que la imagen se cargue, simplemente no puede agregar el elemento IMG a su documento (o establecer el srcatributo IMG en "data:"o "about:blank").
"display: none" no funciona si la imagen está en la primera pantalla y no está cargada de forma diferida. La imagen se cargará pero no se mostrará.
Si convierte la imagen en una imagen de fondo de un div en CSS, cuando ese div esté configurado en "mostrar: ninguno", la imagen no se cargará. Cuando CSS está deshabilitado, todavía no se cargará, porque, bueno, CSS está deshabilitado.
