Efecto CSS de carga para imagenes (Blazy.js)

min Image Hover 3

Demostración Descargar Repositorio

En esta ocasión les comparto imgload.css, es una hoja de estilos que acabo de diseñar y permite realizar distintas animaciones de carga al momento de mostrar la imagen ya cargada por completo. Como dependencia requiere de Blazy.js, y Blazy no requiere de ningún framework, por lo tanto no hay mas dependencias.


Instalación

Descargar el zip "master" e incluir el archivo imgloading.min.css que se encuentra dentro de la carpeta "dist" arriba de </head> de la siguiente forma:


<link href="imgloading.min.css"/>

O puedes utilizar rawgit como cdn:


<link href="https://cdn.rawgit.com/zkreations/imgload.css/master/dist/imgloading.min.css"/>

También puedes incluir directamente el contenido de imgloading.min.css con el resto del css de tu web, sobre todo si usas blogger.


Ahora incluye e inicializa Blazy.js arriba de </body> de la siguiente forma:


<script src="https://cdn.jsdelivr.net/blazy/latest/blazy.min.js"></script>
<script>
   var bLazy = new Blazy({
       selector: '.imgload img',
       successClass: 'loaded',
   });
</script>

Si deseas mas información sobre Blazy.js consulta el documento README.md del repositorio del autor.


Instalar en Blogger

Ve a edición la html de tu plantilla, busca ]]></b:skin> y debajo de eso crea una nueva etiqueta para estilos:


<style>/*<![CDATA[*/

/*]]>*/</style>

Ahora abre el archivo imgloading.min.css, copia todo el contenido y pégalo entre las etiquetas "style". Es necesario incluir blazy de la misma forma como se lo indica en la instalación global.


Uso básico

Agrega un contenedor para la imagen (recomiendo <a href="#"></a>) y agregar la class imgload {{efecto}}, reemplazando {{efecto}} por uno de los preestablecidos, puedes elegir entre: imgFade, imgScale, imgSlide, imgSweptY, imgSweptX, imgFlip. Ademas, la imagen original tiene que ir en el atributo data-src y en el atributo src debe ir una imagen de "reemplazo" mientras carga la original, por ejemplo, yo estoy usando una imagen en base 64 para reducir las peticiones y mejorar la carga aun más:


<a class="imgload imgSweptX" href="#pageUrl">
   <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="img/img-01.jpg"/>
</a>

Mas efectos

Actualizare seguido la hoja de estilos de imgload.css, pero no haré una parte 2 o parte 3, es decir, todos los nuevos efectos estarán en el mismo documento css, de esa forma me ahorro artículos algo repetitivos. Si tienen alguna duda o problema no duden en dejarlo en los comentarios, respondo a todos.