Cargador Lazy Image minimalista en JavaScript puro
| Autor: | ShlokD |
|---|---|
| Views Total: | 920 |
| Sitio oficial: | Ir a la web |
| Actualizado: | February 26, 2018 |
| Licencia: | MIT |
Vista prévia
Descripción
Un Super Tiny (menos de 1Kb) Image Lazy Loader biblioteca sin ninguna tercera dependencia.
Funcionamiento
Importe la versión compilada de la biblioteca de Lazy Loader a su página HTML.
<script src="dist/index.js"></script>
Defina las imágenes para la carga diferida en el atributo Data-src :
<img class="visible-image" data-src="1.jpg"> <img class="visible-image" data-src="2.jpg"> <img class="visible-image" data-src="3.jpg">
Aplique un efecto de fundido de entrada a la imagen cuando se cargue.
img {
max-width: 100%;
max-height: 100%;
-webkit-transition: opacity .5s;
transition: opacity .5s
}
.visible-image { opacity: 1 }
.hidden-image { opacity: 0 }
