Biblioteca de JavaScript pura para la carga diferida de imágenes-LazyLoad. js

Vista prévia

Descripción

LazyLoad. js es una biblioteca de JavaScript independiente para la carga diferida de imágenes sin ninguna dependencia. Es compatible con el srcset atributo y con y saca el mejor provecho del formato de imagen JPEG progresivo.

Uso básico

Cargue la biblioteca de JavaScript LazyLoad. js al final del documento.

<script src="path/to/lazyload.js"></script>

Inserte las imágenes en el documento utilizando atributo original de datos en lugar de src .

<img alt="Alt 1" data-src="1.jpg" width="200" height="200">
<img alt="Alt 2" data-src="2.jpg" width="200" height="200">
<img alt="Alt 3" data-src="3.jpg" width="200" height="200">
...

Inicializa la funcionalidad de carga diferida en tus imágenes con una llamada de JS.

new LazyLoad();

Available options with default values.

// image selector
elements_selector: "img",

// parent container
container: window,

// the distance out of the viewport
threshold: 300,

// different thresholds
thresholds: null,

// data-src
data_src: "src",

// data-srcset
data_srcset: "srcset",

// date-sizes
data_sizes: "sizes",

// multiple background images
data_bg: "bg",

// default classes
class_loading: "loading",
class_loaded: "loaded",
class_error: "error",

// the time (in milliseconds) each image needs to stay inside the viewport before its loading begins.
load_delay: 0,

// enables native lazy loading (where supported) with the loading="lazy" attribute
use_native: false,

// callbacks
callback_load: null,
callback_set: null,
callback_set: null,
callback_enter: null

API methods.

// update the LazyLoad
update();

// force loading any element
load()

// load all images
loadAll()

// destroy the LazyLoad
destroy()

Registro de cambios

v12.0.0beta (03/23/2019)

• Se agregó la opción use_native que permite la carga diferida nativa (donde se admite) con el atributo loading = "Lazy".
• Refactoriza el constructor y el método de actualización

v11.0.6 (03/23/2019)

• Restauró la devolución de llamada callback_set como obsoleta, con el fin de hacer la actualización de v. 10 más fácil.

v11.0.5 (03/15/2019)

• Se ha corregido la propiedad Module de este package. JSON, que apuntaba a un archivo Dist no existente.
• Se ha corregido la propiedad principal de este package. JSON, que apuntaba a un archivo Dist no existente.
• Reversión del parche aplicado en 11.0.2 ya que dio resultados extraños en algunos casos.

v11.0.2 (03/02/2019)

• Aplastó un error desagradable que se produjo en IE 11 y Safari cuando el polyfill de IntersectionObserver no se cargó antes de LazyLoad.
• Se ha corregido un error de cromo.

v11.0.0 (02/24/2019)

• Se ha cambiado el nombre del archivo del paquete ES de LazyLoad. es2015. js a LazyLoad. ESM. js
• Se eliminó la opción to_webp
• Callback callback_enter ha cambiado su significado! Ahora se llama cada vez que un elemento entra en la ventanilla, incluso si load_delay se establece
• Callback callback_exit (New) se llama cada vez que un elemento sale de la ventanilla, incluso si load_delay se establece
• Callback callback_reveal (New) se llama cuando un elemento está a punto de ser revelado, y sus valores de atributo fueron copiados de los datos-atributos a los verdaderos.
• Callback_set de devolución de llamada se eliminó. Puede usar callback_reveal en su lugar.
• Los métodos privados como _ Setobserver, _ Onintersection, etc. ahora están ocultos y protegidos.
• Añadida la opción booleana auto_unobserve.
• Corrección de errores: loadAll () no desobservó elementos.

v10.20.0 (02/09/2019)

• Mejora la detección de WebP para que funcione correctamente en Firefox
• Se agregó la capacidad de saber cuándo se han descargado todas las imágenes a través de la devolución de llamada callback_finish
• Se agregó el archivo demos/print.html para Demo cómo imprimir imágenes perezosas

09/29/2018

• v10.18: Added the ability to have multiple background images, through a new data_bg option.-in-javascript

09/13/2018

• v10.17: Added a new thresholds option that you can use when you need to have different thresholds for the scrolling area, so a single threshold option is not enough for your needs.

08/18/2018

• v10.16: Added new option load_delay to skip loading when fast scrolling occurs. Pass in a number of milliseconds, and each image will be loaded after it stayed inside that viewport for that time.

08/04/2018

• v10.13: Shortened the RegEx for crawlers detection

07/21/2018

• v10.10: Added a public load method to force loading any element.

07/14/2018

• v10.9: Added the ability to lazily set the sizes attribute via a data-sizes attribute.

06/24/2018

• v10.8: Added a public loadAll method to force loading all the images

05/31/2018

• v10.5.2: Added a security check on lazy elements' parents.