Category Archives: css

Optimizar tiempo de carga web con imágenes lazy

Partimos de una página que “pesa” 23mb (sí, tiene imágenes grandes muy bonitas) y las carga todas normalmente. El resultado es que tarda más de 1 minuto en poder navegar

Si utilizamos el plugin de jquery jQuery.Lazy, y configuramos las imagenes como lazy:

Cargando por defecto una imagen pequeña de carga, que ayuda a saber que la imagen se está procesando

Y por otro lado cambiamos el css para en lugar de poner la imagen de fondo directamente

Por codigo javacript que cambia la propiedad

Tenemos como resultado

Lo que mejora la carga de la web en mas del 75%

El resultado se puede ver en:
http://sociedadhistorica.com/indexVACIO.php
Y la pagina anterior al cambio en:
http://sociedadhistorica.com/indexOLD.php
Actualmente utiliza otro sistema, en lugar de cargar la imagen de “cargando” en cada una de ellas, se ha generado una imagen “lazy” con una calidad del 10%, con la consiguiente reducción de tamaño.
Por defecto carga esa imagen y por detras la imagen con calidad óptima, con ello se consigue una pequeña penalización con respecto a la version anterior, pero se obtiene una mejor sensación al tener la pagina con todas las imagenes, mientras se cargan las de alta calidad.
http://sociedadhistorica.com

Mostrar placeholder siempre en input HTML

El atributo placeholder de un input se muestra mientras no tiene valor pero luego desaparece.
La idea es mostrar ese contenido en la parte inferior derecha de la caja de texto siempre que tenga un valor.
Asi para una caja como:

Cuando ponemos el valor el placeholder pasa a estar en la parte inferior

El código necesario está en github :

Y se puede ver funcionando en el siguiente enlace

Para ello hay que incluir la libreria jplaceholder.js ( es necesario el uso de JQUERY )

Y posteriormente ejecutar el codigo:

$('input').jPlaceHolderEmpty();

Jugando con imagenes en jquery (añadir texto y reemplazar texto )

Añadir automaticamente una leyenda a una imagen con su texto alternativo o poder cambiar las imagenes por un div con el mismo tamaño que la imagen y como contenido el texto alternativo.

Para ello nos hace falta JQuery y estilo css

Dada una imagen

Lo que obtenemos es la misma imagen pero con una leyenda inferior

La otra variante oculta la imagen y en su lugar muestra un hueco del mismo tamaño pero con el texto alternativo como contenido.

El ejemplo completo se puede ver aquí

Imagen de fondo a pantalla completa

Ponemos como estilo:

body {
  background: url(imagen.jpg) center center cover no-repeat fixed;
}
@media only screen and (max-width: 767px) {
  body {
    background-image: url(imagenmaspeque.jpg);
  }
}

Y como código de la pagina:

Todo lo que tengas que poner.

El resultado seria:

Todo lo que tengas que poner

Tabla responsive hasta cierto tamaño

Tenemos una tabla formada por varias imágenes, queremos que las imágenes se reduzcan a medida que la pantalla disminuye, pero a partir de un determinado tamaño no queremos que se reduzcan mas,sino que salten de linea:

La tabla podría ser:

<table id="opcionesinicio">
				<tr>
					<td>
						<img src="http://placehold.it/300x300" class="img-responsive"/>
					</td>
					<td>
						
						<img src="http://placehold.it/300x300"  class="img-responsive"/>
					</td>
					<td>
						
						<img src="http://placehold.it/300x300"  class="img-responsive"/>
					</td>
					<td>
						<img src="http://placehold.it/300x300"  class="img-responsive"/><br />
						
					</td>
					<td>
						<img src="http://placehold.it/300x300"  class="img-responsive"/><br />
						
					</td>
					<td>
						<img src="http://placehold.it/300x300"  class="img-responsive"/><br />
						
					</td>
					<td>
						<img src="http://placehold.it/300x300"  class="img-responsive"/><br />
						
					</td>
				</tr>
			</table>

Tal y como está sin css el resultado seria:

responsive1

Ahora añadimos el css para hacerlo responsive:

#opcionesinicio{
    width:100%
}
 .img-responsive  {
           max-width: 100%; 
           width: auto;  
       }

Y el resultado es:
responsive2

Pero si la pantalla es muy pequeña las imagenes apenas se ven.
responsive3

Aqui es donde añadimos el codigo para que a partir de un tamaño la tabla se rompa

@media screen and (max-width:500px){
    
    #opcionesinicio td{
         float:left;
    }
}

responsive4

El resultado completo se puede ver en:

https://jsfiddle.net/18ko3yu8/