interface ILazyLoadOptions { /** * The CSS selector of the elements to load lazily, * which will be selected as descendants of the container object. * @default ".lazy" */ elements_selector?: string; /** * The scrolling container of the elements in the `elements_selector` option. * * @default document */ container?: HTMLElement; /** * A number of pixels representing the outer distance off the scrolling area * from which to start loading the elements. * * @default "300 0" */ threshold?: number; /** * * Similar to threshold, but accepting multiple values and both px and % units. * It maps directly to the rootMargin property of IntersectionObserver (read more), * so it must be a string with a syntax similar to the CSS margin property. * You can use it when you need to have different thresholds for the scrolling area. * It overrides threshold when passed. * * @default null * * @see https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/rootMargin */ thresholds?: string; /** * The name of the data attribute containing the element URL to load, * excluding the `"data-"` part. * E.g. if your data attribute is named `"data-src"`, * just pass `"src"` * * @default "src" */ data_src?: string; /** * The name of the data attribute containing the image URL set to load, * in either img and source tags, * excluding the "data-" part. * E.g. if your data attribute is named `"data-srcset"`, * just pass `"srcset"` * * @default "srcset" */ data_srcset?: string; /** * The name of the data attribute containing the sizes attribute to use, excluding the `"data-"` part. * E.g. if your data attribute is named `"data-sizes"`, just pass `"sizes"` * * @default sizes */ data_sizes?: string; /** * The name of the data attribute containing the URL of `background-image` to load lazily, * excluding the `"data-"` part. * E.g. if your data attribute is named `"data-bg"`, just pass `"bg"`. * The attribute value must be a valid value for `background-image`, * including the `url()` part of the CSS instruction. * * * @default "bg" */ data_bg?: string; /** * The name of the data attribute containing the URL of `background-image` * to load lazily on HiDPI screens, excluding the `"data-"` part. * E.g. if your data attribute is named `"data-bg-hidpi"`, just pass `"bg-hidpi"`. * The attribute value must be a valid value for `background-image`, * including the `url()` part of the CSS instruction. * * @default "bg-hidpi" */ data_bg_hidpi?: string; /** * The name of the data attribute containing the value of multiple `background-image` * to load lazily, excluding the `"data-"` part. * E.g. if your data attribute is named `"data-bg-multi"`, just pass `"bg-multi"`. * The attribute value must be a valid value for `background-image`, * including the `url()` part of the CSS instruction. * * @default "bg-multi" */ data_bg_multi?: string; /** * The name of the data attribute containing the value of multiple `background-image` * to load lazily on HiDPI screens, excluding the `"data-"` part. * E.g. if your data attribute is named `"data-bg-multi-hidpi"`, just pass `"bg-multi-hidpi"`. * The attribute value must be a valid value for `background-image`, * including the `url()` part of the CSS instruction. * * @default "bg-multi-hidpi" */ data_bg_multi_hidpi?: string; /** * The name of the data attribute containing the value of poster to load lazily, * excluding the `"data-"` part. * E.g. if your data attribute is named `"data-poster"`, just pass `"poster"`. * * @default "poster" */ data_poster?: string; /** * The class applied to the multiple background elements after the multiple background was applied * * @default "applied" */ class_applied?: string; /** * The class applied to the elements while the loading is in progress. * * @default "loading" */ class_loading?: string; /** * The class applied to the elements when the loading is complete. * * @default "loaded" */ class_loaded?: string; /** * The class applied to the elements when the element causes an error. * * @default "error" */ class_error?: string; /** * DEPRECATED * * You should change `load_delay: ___` with `cancel_on_exit: true`. * * @deprecated */ load_delay?: number; /** * A boolean that defines whether or not to cancel the download of the images * that exit the viewport while they are still loading, * eventually restoring the original attributes. * It applies only to images so to the `img` (and `picture`) tags, * so it doesn't apply to background images, `iframes` nor `videos`. * * @default true */ cancel_on_exit?: boolean; /** * A boolean that defines whether or not to automatically unobserve elements once they entered the viewport * * @default false */ unobserve_entered?: boolean; /** * A boolean that defines whether or not to automatically unobserve elements once they've loaded or throwed an error * * @default true */ unobserve_completed?: boolean; /** * DEPRECATED * * You should replace `auto_unobserve` with `unobserve_completed` * * @deprecated */ auto_unobserve?: boolean; /** * A callback function which is called whenever a multiple background element starts loading. * Arguments: `DOM element`, `lazyload instance`. */ callback_applied?: (elt: HTMLElement, instance: ILazyLoadInstance) => void; /** * A callback function which is called whenever an element loading is * canceled while loading, as for `cancel_on_exit: true` */ callback_cancel?: ( elt: HTMLElement, entry: IntersectionObserverEntry, instance: ILazyLoadInstance ) => void; /** * A callback function which is called whenever an element enters the viewport. * Arguments: DOM element, intersection observer entry, lazyload instance. */ callback_enter?: ( elt: HTMLElement, entry: IntersectionObserverEntry, instance: ILazyLoadInstance ) => void; /** * A callback function which is called whenever an element exits the viewport. * Arguments: `DOM element`, `intersection observer entry`, `lazyload instance`. */ callback_exit?: ( elt: HTMLElement, entry: IntersectionObserverEntry, instance: ILazyLoadInstance ) => void; /** * A callback function which is called whenever an element starts loading. * Arguments: `DOM element`, `lazyload instance`. */ callback_loading?: (elt: HTMLElement, instance: ILazyLoadInstance) => void; /** * A callback function which is called whenever an element finishes loading. * Note that, in version older than 11.0.0, this option went under the name `callback_load`. * Arguments: `DOM element`, `lazyload instance`. */ callback_loaded?: (elt: HTMLElement, instance: ILazyLoadInstance) => void; /** * A callback function which is called whenever an element triggers an error. * Arguments: `DOM element`, `lazyload instance`. */ callback_error?: (elt: HTMLElement, instance: ILazyLoadInstance) => void; /** * */ /** * A callback function which is called when there are no more elements to load and all elements have been downloaded. * Arguments: `lazyload instance`. */ callback_finish?: () => void; /** * This boolean sets whether or not to use [native lazy loading](https://addyosmani.com/blog/lazy-loading/) * to do [hybrid lazy loading](https://www.smashingmagazine.com/2019/05/hybrid-lazy-loading-progressive-migration-native/). * On browsers that support it, LazyLoad will set the `loading="lazy"` attribute on `images` and `iframes`, * and delegate their loading to the browser. * * @default false */ use_native?: boolean; /** * DEPRECATED, WILL BE REMOVED IN V. 15 * * @deprecated */ callback_reveal?: (elt: HTMLElement) => void; } interface ILazyLoadInstance { /** * Make LazyLoad to re-check the DOM for `elements_selector` elements inside its `container`. * * ### Use case * * Update LazyLoad after you added or removed DOM elements to the page. */ update: (elements?: NodeListOf<HTMLElement>) => void; /** * Destroys the instance, unsetting instance variables and removing listeners. * * ### Use case * * Free up some memory. Especially useful for Single Page Applications. */ destroy: () => void; load: (element: HTMLElement, force?: boolean) => void; /** * Loads all the lazy elements right away and stop observing them, * no matter if they are inside or outside the viewport, * no matter if they are hidden or visible. * * ### Use case * * To load all the remaining elements in advance */ loadAll: () => void; /** * The number of elements that are currently downloading from the network * (limitedly to the ones managed by the instance of LazyLoad). * This is particularly useful to understand whether * or not is safe to destroy this instance of LazyLoad. */ loadingCount: number; /** * The number of elements that haven't been lazyloaded yet * (limitedly to the ones managed by the instance of LazyLoad) */ toLoadCount: number; } interface ILazyLoad { new ( options?: ILazyLoadOptions, elements?: NodeListOf<HTMLElement> ): ILazyLoadInstance; /** * Immediately loads the lazy `element`. * You can pass your custom options in the settings parameter. * Note that the `elements_selector` option has no effect, * since you are passing the element as a parameter. * Also note that this method has effect only once on a specific `element`. * * ### Use case * * To load an `element` at mouseover or at any other event different than "entering the viewport" */ load(element: HTMLElement, settings: ILazyLoadOptions): void; /** * Resets the internal status of the given element. * * ### Use case * * To tell LazyLoad to consider this `element` again, for example if you changed * the `data-src` attribute after the previous `data-src` was loaded, * call this method, then call `update()`. */ resetStatus(element: HTMLElement): void; } declare var LazyLoad: ILazyLoad;
