@unlazy/core/dist/index.d.cts

Universal lazy loading library for placeholder images leveraging native browser APIs

interface UnLazyLoadOptions {
    /**
     * Whether to generate a blurry placeholder from a [BlurHash](https://blurha.sh)
     * or [ThumbHash](https://github.com/evanw/thumbhash) string. The placeholder
     * image will be inlined as a data URI in the `src` attribute.
     *
     * @remarks
     * If this option is set to `true`, the `data-blurhash` or `data-thumbhash`
     * attributes will be used for the hash string. If you pass a single element
     * as the `selectorsOrElements` argument, you can also pass a string to this
     * option to override the hash string.
     */
    hash?: string | boolean;
    /**
     * Specify the hash type to use for generating the blurry placeholder.
     *
     * @remarks
     * This option is ignored if the `hash` option is set to a boolean value.
     * In these cases, the `data-blurhash` or `data-thumbhash` attributes will
     * be used to determine the hash type.
     *
     * @default 'blurhash'
     */
    hashType?: 'blurhash' | 'thumbhash';
    /**
     * The size of the longer edge (width or height) of the BlurHash image to be
     * decoded, depending on the aspect ratio.
     *
     * @remarks
     * This option is ignored if the `hashType` option is set to `thumbhash`.
     *
     * @default 32
     */
    placeholderSize?: number;
    /**
     * Whether to update the `sizes` attribute on resize events with the current image width.
     *
     * @default false
     */
    updateSizesOnResize?: boolean;
    /**
     * A callback function to run when an image is loaded.
     */
    onImageLoad?: (image: HTMLImageElement) => void;
}

declare function lazyLoad<T extends HTMLImageElement>(
/**
 * A CSS selector, a DOM element, a list of DOM elements, or an array of DOM elements to lazy-load.
 *
 * @default 'img[loading="lazy"]'
 */
selectorsOrElements?: string | T | NodeListOf<T> | T[], { hash, hashType, placeholderSize, updateSizesOnResize, onImageLoad, }?: UnLazyLoadOptions): () => void;
declare function autoSizes<T extends HTMLImageElement | HTMLSourceElement>(
/**
 * A CSS selector, a DOM element, a list of DOM elements, or an array of DOM elements to calculate the `sizes` attribute for.
 *
 * @default 'img[data-sizes="auto"], source[data-sizes="auto"]'
 */
selectorsOrElements?: string | T | NodeListOf<T> | T[]): void;
declare function loadImage(image: HTMLImageElement, onImageLoad?: (image: HTMLImageElement) => void): void;
declare function createPlaceholderFromHash({ image, hash, hashType, size, ratio, }?: {
    /** If present, the hash will be extracted from the image's `data-blurhash` or `data-thumbhash` attribute and ratio will be calculated from the image's actual dimensions. */
    image?: HTMLImageElement;
    hash?: string;
    hashType?: 'blurhash' | 'thumbhash';
    /** @default 32 */
    size?: number;
    /** Will be calculated from the image's actual dimensions if image is provided and ratio is not. */
    ratio?: number;
}): string | undefined;

declare const isSSR: boolean;
declare const isLazyLoadingSupported: boolean;
declare const isCrawler: boolean;
declare function toElementArray<T extends HTMLElement>(target: string | T | NodeListOf<T> | T[], parentElement?: Element | Document): T[];
declare function createIndexedImagePlaceholder(index: number): string;
declare function debounce<T extends (...args: any[]) => void>(fn: T, delay: number): (...args: Parameters<T>) => void;

export { autoSizes, createIndexedImagePlaceholder, createPlaceholderFromHash, debounce, isCrawler, isLazyLoadingSupported, isSSR, lazyLoad, loadImage, toElementArray };
export type { UnLazyLoadOptions };