Imagen adaptable de la carga lenta de la biblioteca JS-lazysizes
| Autor: | |
|---|---|
| Views Total: | 2,825 |
| Sitio oficial: | Ir a la web |
| Actualizado: | December 21, 2018 |
| Licencia: | MIT |
Vista prévia
Descripción
lazysizes es una biblioteca JS fácil pero robusta que se utiliza para retrasar la carga de imágenes (iframes, scripts, etc.) hasta que se ven en la vista, así como cargando las fuentes apropiadas de acuerdo a los puntos de rotura definidos en el marcado para ajustarse a cualquier tamaño de pantalla.
Diseñado para sitios web de alto rendimiento para mejorar el tiempo de carga de la página y para ahorrar ancho de banda.
Uso básico
Cargue el script lazysizes. js en el documento.
<script src="lazysizes.js" async></script>
Cargue el respimage. js para las imágenes adaptables polyfill para cargar sus imágenes de forma rápida y responsable (opcional).
<script src="respimage.min.js" async></script>
Inserte una imagen de baja calidad con la clase CSS esencial ' LazyLoad ' en su documento. Utilice el atributo Data-src de HTML5 para especificar el origen de imagen normal/de alta calidad.
<img src="low-quality-src.jpg" data-src="normal-quality-src.jpg" class="lazyload">
Integración con respimage. js .
<img data-sizes="auto" src="low-quality-src.jpg" data-srcset="image1.jpg 100w, image2.jpg 300w, image3.jpg 600w, image4.jpg 900w" class="lazyload">
Hecho. La biblioteca JS se encargará del resto.
Todas las opciones posibles.
{
lazyClass: 'lazyload',
loadedClass: 'lazyloaded',
loadingClass: 'lazyloading',
preloadClass: 'lazypreload',
errorClass: 'lazyerror',
//strictClass: 'lazystrict',
autosizesClass: 'lazyautosizes',
srcAttr: 'data-src',
srcsetAttr: 'data-srcset',
sizesAttr: 'data-sizes',
//preloadAfterLoad: false,
minSize: 40,
customMedia: {},
init: true,
expFactor: 1.5,
hFac: 0.8,
loadMode: 2,
loadHidden: true,
ricTimeout: 0,
throttleDelay: 125,
}; Para usos más avanzados, echa un vistazo a la readme.md en el zip.
Registro de cambios
v4.1.5 (2018-12-21)
- Actualización y corrección de errores
