Efecto de carga de imagen de estilo mediano-pilpil
| Autor: | zafree |
|---|---|
| Views Total: | 2,704 |
| Sitio oficial: | Ir a la web |
| Actualizado: | May 31, 2016 |
| Licencia: | MIT |
Vista prévia
Descripción
pilpil es una librería JavaScript que progresivamente carga imágenes con un efecto de desenfoque como se ve en Medium.com.
Funcionamiento
Cargue el JavaScript y la hoja de estilo de pilpil en el documento HTML.
<link rel="stylesheet" href="pilpil.min.css"> <script src="dist/js/pilpil.min.js"></script>
Agregue imágenes de baja resolución y alta resolución a su página web siguiendo la estructura de marcado como esta:
<figure class="graf-figure"> <div class="aspectRatioPlaceholder"> <div class="aspectRatioPlaceholder-fill"></div> <div class="progressiveMedia" data-width="1800" data-height="1680"> <img class="progressiveMedia-thumbnail" src="thumb.jpg" alt="" /> <canvas class="progressiveMedia-canvas"></canvas> <img class="progressiveMedia-image" data-src="full.jpg" alt="" /> </div> </div> </figure>
Eso es todo. Pilpil se encargará del resto.
