CSS image preload

Escrito por Programador ASP clásico en Hojas de estilo CSS


Hoy vamos a explorar otro CSS uso básico: preloaders imagen. Es una buena práctica de no utilizar imágenes grandes (en términos de peso) para los sitios web, sin embargo a veces es parte del juego. Basta pensar en el hecho de que un sitio web puede estar centrada en la fotografía y la alta resolución las imágenes pueden constituir su elemento más importante. En esos casos, las imágenes pueden tardar un poco en cargar y cajas vacías que aparecen en la página de inicio no son realmente un buen espectáculo de bienvenida para los usuarios. Con CSS podemos reproducir un gif de carga como:

que se muestra mientras se carga la imagen principal. Vamos a ver cómo podemos hacerlo. HTML Tenemos que crear un contenedor para la imagen:

<div class="preloader">   <img src="foto_alta_calidad.jpg" width="840" height="281"> </div>

La imagen se encuentra dentro de un div con class = “preloader”. En la etiqueta img establecemos el ancho y el alto de la imagen original .

CSS Con algunas reglas básicas, podemos labrar el contenedor de imagen:

div.preloader {   width: 852px;   height: 293px;   padding: 5px 5px 5px 5px;   border: solid 1px #000000; }


La anchura y la altura del recipiente está considerando el tamaño de la imagen y los bordes y el relleno (840+5+5+ y 281+5+5+). Las reglas anteriores se pueden cambiar de acuerdo a sus necesidades. Ahora establecemos normas para la imagen en sí misma:

div.preloader img  {   display: block;   background-image: url(images/loading.gif);   background-repeat: no-repeat;   background-position: center center; }

Utilizamos como imagen de fondo del gif animado se muestra arriba. Nos colocarlo en el centro del contenedor, sin repetición. Y eso es todo. Mientras que la imagen grande se está cargando, el usuario verá el gif animado. Cuando la gran imagen se ha cargado, que cubre y oculta el gif animado. 

Publicado el 10/09/2014 a las 13:47:20 hrs. | 565 visitas.

Subir
Web hosting by Somee.com