@stacksjs/stx/dist/media/client/lazy-load.d.ts

A performant UI Framework. Powered by Bun.

/**
 * Check if native lazy loading is supported
 */
export declare function isNativeLazySupported(): boolean;
/**
 * Check if IntersectionObserver is supported
 */
export declare function isIntersectionObserverSupported(): boolean;
/**
 * Initialize lazy loading for all matching elements
 *
 * @example
 * ```typescript
 * // Initialize with default options
 * initLazyLoading()
 *
 * // Initialize with custom options
 * initLazyLoading({
 *   rootMargin: '100px',
 *   onLoaded: (el) => console.log('Loaded:', el)
 * })
 * ```
 */
export declare function initLazyLoading(options?: LazyLoadOptions): () => void;
/**
 * Load a single lazy element
 */
export declare function loadElement(element: HTMLElement, options?: LazyLoadOptions): void;
/**
 * Manually trigger loading for a specific element
 */
export declare function lazyLoad(element: HTMLElement): void;
/**
 * Manually trigger loading for all matching elements
 */
export declare function lazyLoadAll(selector?: string): void;
/**
 * Create a reusable intersection observer
 */
export declare function createLazyObserver(options?: LazyLoadOptions): IntersectionObserver;
/**
 * Observe a new element with an existing observer
 */
export declare function observeElement(observer: IntersectionObserver, element: HTMLElement): void;
/**
 * Unobserve all elements and disconnect
 */
export declare function disconnectObserver(observer: IntersectionObserver): void;
/**
 * Generate the client-side lazy loading runtime script
 */
export declare function generateLazyLoadRuntime(): string;
/**
 * STX Media - Client-Side Lazy Loading
 *
 * IntersectionObserver-based lazy loading for images and media.
 * Supports native loading="lazy" with intelligent fallback.
 *
 * @module media/client/lazy-load
 */
// =============================================================================
// Types
// =============================================================================
export declare interface LazyLoadOptions {
  root?: Element | null
  rootMargin?: string
  threshold?: number | number[]
  useNative?: boolean
  selector?: string
  onLoad?: (element: HTMLElement) => void
  onLoaded?: (element: HTMLElement) => void
  onError?: (element: HTMLElement, error: Error) => void
}