Una biblioteca JavaScript Tiny para cargar imágenes perezosas
| Autor: | englishextra |
|---|---|
| Views Total: | 4,056 |
| Sitio oficial: | Ir a la web |
| Actualizado: | July 2, 2014 |
| Licencia: | MIT |
Vista prévia
Descripción
Una pequeña biblioteca de JavaScript (~ 2Kb minimizada) utilizada para retrasar la carga de imágenes hasta que se ven en la vista.
Funcionamiento
Inserte imágenes con la clase CSS de ' Lazy-Load ' en su documento. Utilice src Attribute para apuntar a una carga de imagen. Utilice Data-src Attribute para apuntar a los archivos de imagen.
<img class="lazy-load" src="ajax-loader.gif" data-src="1.jpg" alt=""> <img class="lazy-load" src="ajax-loader.gif" data-src="2.jpg" alt=""> <img class="lazy-load" src="ajax-loader.gif" data-src="3.jpg" alt=""> ...
Un poco de estilos CSS para proporcionar una transición de fundido de entrada cuando las imágenes se desplazan a la vista.
.lazy-load { opacity: 0; }
.lazy-loaded { opacity: 1; }
.lazy-load,
.lazy-loaded {
transition: opacity .3s;
-moz-transition: opacity .3s;
-ms-transition: opacity .3s;
-o-transition: opacity .3s;
-webkit-transition: opacity .3s;
} Incluya el LazyLoad. min. js en la parte inferior del documento.
<script src="js/lazyload.min.js"></script>
