### Install @unlazy/react with npm Source: https://github.com/johannschopplich/unlazy/blob/main/docs/integrations/react.md Install the @unlazy/react package using npm. ```bash npm install -D @unlazy/react ``` -------------------------------- ### Install @unlazy/vue with npm Source: https://github.com/johannschopplich/unlazy/blob/main/docs/integrations/vue.md Install the @unlazy/vue package using npm. ```bash npm install -D @unlazy/vue ``` -------------------------------- ### Install @unlazy/solid Source: https://github.com/johannschopplich/unlazy/blob/main/packages/solid/README.md Install the @unlazy/solid package using pnpm or npm. ```bash # pnpm pnpm add @unlazy/solid # npm npm i @unlazy/solid ``` -------------------------------- ### Install @unlazy/react with pnpm Source: https://github.com/johannschopplich/unlazy/blob/main/docs/integrations/react.md Install the @unlazy/react package using pnpm. ```bash pnpm add -D @unlazy/react ``` -------------------------------- ### Install @unlazy/react with yarn Source: https://github.com/johannschopplich/unlazy/blob/main/docs/integrations/react.md Install the @unlazy/react package using yarn. ```bash yarn add -D @unlazy/react ``` -------------------------------- ### Install @unlazy/vue Source: https://github.com/johannschopplich/unlazy/blob/main/packages/vue/README.md Install the @unlazy/vue package using pnpm or npm. ```bash # pnpm pnpm add @unlazy/vue # npm npm i @unlazy/vue ``` -------------------------------- ### Install @unlazy/react Source: https://github.com/johannschopplich/unlazy/blob/main/packages/react/README.md Install the @unlazy/react package using pnpm or npm. ```bash # pnpm pnpm add @unlazy/react # npm npm i @unlazy/react ``` -------------------------------- ### Install @unlazy/vue with pnpm Source: https://github.com/johannschopplich/unlazy/blob/main/docs/integrations/vue.md Install the @unlazy/vue package using pnpm. ```bash pnpm add -D @unlazy/vue ``` -------------------------------- ### Install @unlazy/svelte Source: https://github.com/johannschopplich/unlazy/blob/main/docs/integrations/svelte.md Install the package using your preferred package manager. ```bash pnpm add -D @unlazy/svelte ``` ```bash yarn add -D @unlazy/svelte ``` ```bash npm install -D @unlazy/svelte ``` -------------------------------- ### Install @unlazy/vue with yarn Source: https://github.com/johannschopplich/unlazy/blob/main/docs/integrations/vue.md Install the @unlazy/vue package using yarn. ```bash yarn add -D @unlazy/vue ``` -------------------------------- ### Install unlazy Source: https://github.com/johannschopplich/unlazy/blob/main/packages/unlazy/README.md Install the unlazy package using pnpm or npm. ```bash # pnpm pnpm add unlazy # npm npm i unlazy ``` -------------------------------- ### Install @unlazy/nuxt Source: https://github.com/johannschopplich/unlazy/blob/main/packages/nuxt/README.md Install the Nuxt module using pnpm or npm. ```bash # pnpm pnpm add @unlazy/nuxt # npm npm i @unlazy/nuxt ``` -------------------------------- ### Install @unlazy/svelte Source: https://github.com/johannschopplich/unlazy/blob/main/packages/svelte/README.md Install the Svelte 5 component for unlazy using pnpm or npm. ```bash # pnpm pnpm add @unlazy/svelte # npm npm i @unlazy/svelte ``` -------------------------------- ### Install unlazy with npm Source: https://github.com/johannschopplich/unlazy/blob/main/docs/guide/installation.md Install the unlazy package as a development dependency using npm. ```bash npm install -D unlazy ``` -------------------------------- ### Install unlazy with pnpm Source: https://github.com/johannschopplich/unlazy/blob/main/docs/guide/installation.md Install the unlazy package as a development dependency using pnpm. ```bash pnpm add -D unlazy ``` -------------------------------- ### HTML Example for autoSizes Source: https://github.com/johannschopplich/unlazy/blob/main/docs/api/auto-sizes.md Example of an img element with srcset and data-sizes="auto" attribute, intended for use with the autoSizes function. ```html ``` -------------------------------- ### Install unlazy with yarn Source: https://github.com/johannschopplich/unlazy/blob/main/docs/guide/installation.md Install the unlazy package as a development dependency using yarn. ```bash yarn add -D unlazy ``` -------------------------------- ### Install unlazy with pnpm or npm Source: https://github.com/johannschopplich/unlazy/blob/main/README.md Install the unlazy library as a development dependency using your preferred package manager. ```bash # pnpm pnpm add -D unlazy # npm npm i -D unlazy ``` -------------------------------- ### Install unlazy with pnpm Source: https://github.com/johannschopplich/unlazy/blob/main/docs/guide/migration.md Use this command to add unlazy version 2 to your project dependencies. ```sh pnpm add unlazy@2 ``` -------------------------------- ### Initialize autoSizes with ResizeObserver Source: https://github.com/johannschopplich/unlazy/blob/main/docs/api/auto-sizes.md Call autoSizes to resolve data-sizes="auto" attributes and install a debounced ResizeObserver to re-resolve them on viewport changes. The returned cleanup function disconnects the observer. ```typescript import { autoSizes } from 'unlazy' const cleanup = autoSizes('img[data-sizes="auto"]', { updateOnResize: true }) // Later, when cleaning up cleanup() ``` -------------------------------- ### Basic PNG Data URI Creation Source: https://github.com/johannschopplich/unlazy/blob/main/docs/api/blurhash-create-png-data-uri.md A simple example demonstrating how to create a PNG data URI from a BlurHash string without specifying additional options. The output can be used directly in an `` tag's `src` attribute. ```typescript import { createPngDataUri } from 'unlazy/blurhash' const blurhash = 'LKO2:N%2Tw=w]~RBVZRi};RPxuwH' const pngDataUri = createPngDataUri(blurhash) ``` -------------------------------- ### Basic UnLazyImage Usage Source: https://github.com/johannschopplich/unlazy/blob/main/packages/svelte/README.md A basic example of using the UnLazyImage component with blurhash and srcset. The autoSizes prop is enabled for responsive images. ```svelte console.log('Loaded:', img.src)} /> ``` -------------------------------- ### Auto-Initialization via CDN Source: https://github.com/johannschopplich/unlazy/blob/main/docs/guide/installation.md Use the global CDN build with the 'defer' and 'init' attributes for automatic initialization. The 'init' attribute enables automatic watching of elements with 'loading="lazy"'. ```html ``` -------------------------------- ### Manual Initialization via CDN Source: https://github.com/johannschopplich/unlazy/blob/main/docs/guide/installation.md Use the global CDN build without the 'init' attribute and manually call lazyLoad after the script has loaded. This provides more control over when initialization occurs. ```html ``` -------------------------------- ### Import and Use UnLazyImage Component Source: https://github.com/johannschopplich/unlazy/blob/main/docs/integrations/react.md Import the UnLazyImage component and use it in your React component. This example demonstrates basic usage with blurhash and srcset. ```tsx import { UnLazyImage } from '@unlazy/react' export default function MyComponent() { return ( ) } ``` -------------------------------- ### Eager Loading Hero Image Source: https://github.com/johannschopplich/unlazy/blob/main/docs/guide/migration.md Use this for your hero or LCP image to ensure it loads eagerly. It requires `loading="eager"` and `data-src` or `data-srcset` attributes. ```html Sunset ``` -------------------------------- ### Delegate ongoing size tracking to autoSizes Source: https://github.com/johannschopplich/unlazy/blob/main/docs/guide/migration.md `triggerLoad` is one-shot again. Ongoing re-resolution of `data-sizes="auto"` lives on `autoSizes`, which now accepts `{ updateOnResize: true }` and returns a cleanup function. ```diff - triggerLoad(image, { updateSizesOnResize: true }) + const cleanupSizes = autoSizes(image, { updateOnResize: true }) + const cleanupLoad = triggerLoad(image) + // Later: cleanupSizes(); cleanupLoad() ``` -------------------------------- ### Import createPngDataUri Source: https://github.com/johannschopplich/unlazy/blob/main/docs/api/thumbhash-create-png-data-uri.md Import the createPngDataUri function from the unlazy/thumbhash module. ```typescript import { createPngDataUri } from 'unlazy/thumbhash' ``` -------------------------------- ### Eager Loading for Above-the-Fold Images Source: https://github.com/johannschopplich/unlazy/blob/main/docs/guide/core-web-vitals.md Mark above-the-fold images with `loading="eager"` to ensure they are loaded immediately and routed through the priority path. `fetchpriority="high"` is automatically added if not already present. ```html Sunset over the ocean ``` -------------------------------- ### Preload Image with UnLazyImage Source: https://github.com/johannschopplich/unlazy/blob/main/docs/integrations/svelte.md Set the 'preload' prop to true to immediately load the image, bypassing lazy loading. ```svelte ``` -------------------------------- ### Eager Loading for Above-the-Fold Images Source: https://github.com/johannschopplich/unlazy/blob/main/docs/guide/usage.md Use `loading="eager"` for images that must be visible immediately in the viewport, such as hero images. This prevents them from being lazy-loaded. ```html Sunset over the ocean ``` -------------------------------- ### Basic Image Lazy Loading Source: https://github.com/johannschopplich/unlazy/blob/main/packages/unlazy/README.md Use this HTML structure with `loading="lazy"` for native lazy loading. Ensure `data-srcset` and `data-sizes` are provided for responsive images. ```html Descriptive text ``` -------------------------------- ### Import and Use UnLazyImage Component Source: https://github.com/johannschopplich/unlazy/blob/main/docs/integrations/svelte.md Import the UnLazyImage component and use it with basic props like blurhash and srcset. ```svelte ``` -------------------------------- ### UnLazyImage with Multiple Image Sources Source: https://github.com/johannschopplich/unlazy/blob/main/docs/integrations/svelte.md Pass a 'sources' array to render a element for format negotiation and art direction. ```svelte ``` -------------------------------- ### createPlaceholderFromHash Source: https://github.com/johannschopplich/unlazy/blob/main/docs/api/index.md Generates a PNG data URI from a hash, intended for client-side use. ```APIDOC ## createPlaceholderFromHash ### Description Generate PNG data URI from hash (client-side). ### Import `unlazy` ### Purpose To create image placeholders using a hash, suitable for client-side rendering. ``` -------------------------------- ### Replace loadImage with triggerLoad Source: https://github.com/johannschopplich/unlazy/blob/main/docs/guide/migration.md The deprecated `loadImage` alias is gone. Replace every call site with `triggerLoad`. ```diff - import { loadImage } from 'unlazy' - loadImage(image, onLoad, onError) + import { triggerLoad } from 'unlazy' + triggerLoad(image, { onImageLoad: onLoad, onImageError: onError }) ``` -------------------------------- ### Using triggerLoad with Callbacks Source: https://github.com/johannschopplich/unlazy/blob/main/docs/api/trigger-load.md Load an image immediately and handle load success or error events using callbacks. The returned cleanup function can be used to cancel the load if it hasn't completed. ```ts import { triggerLoad } from 'unlazy' const image = document.querySelector('.priority-image')! // Load immediately with callbacks const cleanup = triggerLoad(image, { onImageLoad: img => console.log('Loaded:', img.src), onImageError: (img, error) => console.error('Failed to load:', img, error), }) // Later, cancel the load if it hasn't completed yet cleanup() ``` -------------------------------- ### UnLazyImage with ThumbHash Placeholder Source: https://github.com/johannschopplich/unlazy/blob/main/docs/integrations/solid.md Utilize ThumbHash for a compact, generated placeholder. Explicit `width` and `height` props are recommended. ```tsx return ( ) ``` -------------------------------- ### createPngDataUri (blurhash) Source: https://github.com/johannschopplich/unlazy/blob/main/docs/api/index.md Generates a PNG data URI from a BlurHash, optimized for Server-Side Rendering (SSR). ```APIDOC ## createPngDataUri (blurhash) ### Description Generate PNG data URI from BlurHash (SSR). ### Import `unlazy/blurhash` ### Purpose To generate PNG data URIs from BlurHash strings on the server-side. ``` -------------------------------- ### Using a Data URL as an Image Placeholder Source: https://github.com/johannschopplich/unlazy/blob/main/docs/guide/placeholders.md Place a data URL directly into the `src` attribute for unlazy. The browser decodes the placeholder natively when no hash attribute is present. ```html Article cover ``` -------------------------------- ### autoSizes with ResizeObserver Option Source: https://github.com/johannschopplich/unlazy/blob/main/docs/api/auto-sizes.md Resolve data-sizes="auto" attributes and enable tracking of viewport changes to re-resolve sizes dynamically. The returned function cleans up the observers. ```typescript import { autoSizes } from 'unlazy' // Or: resolve and keep tracking on resize const cleanup = autoSizes(undefined, { updateOnResize: true }) ``` -------------------------------- ### createPlaceholderFromHash Source: https://github.com/johannschopplich/unlazy/blob/main/docs/api/create-placeholder-from-hash.md Generates a PNG data URI placeholder from a BlurHash or ThumbHash string. It can accept a hash string directly or extract hash information from an image element. The function supports specifying hash type, size for decoding, and aspect ratio. ```APIDOC ## createPlaceholderFromHash ### Description Generates a PNG data URI placeholder from a BlurHash or ThumbHash string. This function is used internally by [`lazyLoad`](/api/lazy-load) but can also be called directly for custom implementations. ### Parameters - **image** (`HTMLImageElement`) - Optional - If provided, extracts hash from `data-blurhash` or `data-thumbhash` and calculates ratio from element dimensions. - **hash** (`string`) - Optional - Hash string to decode. Takes precedence over `image` attributes. - **hashType** (`'blurhash' | 'thumbhash'`) - Optional - Default: `'blurhash'` - Hash format. Auto-detected when `image` is provided. - **size** (`number`) - Optional - Default: `32` - Size of the longer edge for BlurHash decoding. Ignored for ThumbHash. - **ratio** (`number`) - Optional - Aspect ratio (width / height) for BlurHash. Auto-calculated from `image` if provided. ### Return Value Returns a PNG data URI string if the hash is successfully decoded, or `undefined` if: - No hash is provided - The hash decoding fails - The required decoding library isn't available ### Examples Using with a hash string: ```ts import { createPlaceholderFromHash } from 'unlazy' const placeholder = createPlaceholderFromHash({ hash: 'LKO2:N%2Tw=w]~RBVZRi};RPxuwH', hashType: 'blurhash', size: 32, ratio: 16 / 9 }) ``` Using with an image element: ```ts import { createPlaceholderFromHash } from 'unlazy' const img = document.querySelector('img') const placeholder = createPlaceholderFromHash({ image: img }) if (placeholder) { img.src = placeholder } ``` ```html ``` ``` -------------------------------- ### UnLazyImage with ThumbHash Placeholder Source: https://github.com/johannschopplich/unlazy/blob/main/docs/integrations/vue.md Utilize ThumbHash for another efficient, client-side generated placeholder. Explicit width and height attributes are recommended. ```html ``` -------------------------------- ### createPngDataUri (thumbhash) Source: https://github.com/johannschopplich/unlazy/blob/main/docs/api/index.md Generates a PNG data URI from a ThumbHash, optimized for Server-Side Rendering (SSR). ```APIDOC ## createPngDataUri (thumbhash) ### Description Generate PNG data URI from ThumbHash (SSR). ### Import `unlazy/thumbhash` ### Purpose To generate PNG data URIs from ThumbHash strings on the server-side. ``` -------------------------------- ### Initialize Lazy Loading for All Images Source: https://github.com/johannschopplich/unlazy/blob/main/README.md Import and call the lazyLoad function to process all images with the `loading="lazy"` attribute or `loading="eager"` with a `data-src` attribute. ```typescript import { lazyLoad } from 'unlazy' // Processes `img[loading="lazy"]` and `img[loading="eager"][data-src|data-srcset]` lazyLoad() ``` -------------------------------- ### Above-the-Fold Image with Eager Loading Source: https://github.com/johannschopplich/unlazy/blob/main/README.md Use `loading="eager"` for above-the-fold images. unlazy will immediately swap the source and apply `fetchpriority="high"`. ```html Sunset ``` -------------------------------- ### Configure Vite Build Flags Source: https://github.com/johannschopplich/unlazy/blob/main/docs/advanced/build-flags.md Tree-shake hash decoding algorithms and disable client logging in Vite by setting the `define` option in your `vite.config.ts` file. Defaults are `true` for both flags. ```typescript // `vite.config.ts` import { defineConfig } from 'vite' export default defineConfig({ define: { // Defaults to `true` __UNLAZY_HASH_DECODING__: false, // Defaults to `true` __UNLAZY_LOGGING__: false, }, }) ``` -------------------------------- ### createPngDataUri Source: https://github.com/johannschopplich/unlazy/blob/main/docs/api/blurhash-create-png-data-uri.md Creates a PNG data URI from a BlurHash string. Optionally accepts BlurHashOptions to control the output. ```APIDOC ## createPngDataUri Creates a PNG data URI from a BlurHash string for server-side rendering. This function decodes the BlurHash into RGBA pixel data and encodes it as a base64 PNG data URI. ### Function Signature ```ts createPngDataUri(blurhash: string, options?: BlurHashOptions) ``` ### Parameters - **blurhash** (string) - Required - The BlurHash string to decode. - **options** (BlurHashOptions) - Optional - Configuration options for generating the PNG data URI. - **ratio** (number) - Optional - The aspect ratio of the image. - **size** (number) - Optional - The size of the generated PNG. ### Returns - **string** - A PNG data URI string. ### Example ```ts import { createPngDataUri } from 'unlazy/blurhash' const blurhash = 'LKO2:N%2Tw=w]~RBVZRi};RPxuwH' const pngDataUri = createPngDataUri(blurhash, { ratio: 16 / 9, size: 32 }) // pngDataUri will contain a PNG data URI string ``` ``` -------------------------------- ### Pairing triggerLoad with autoSizes for Responsive Images Source: https://github.com/johannschopplich/unlazy/blob/main/docs/api/trigger-load.md Combine triggerLoad with autoSizes for ongoing source-size tracking on responsive layouts. This ensures images are loaded correctly and their sizes are updated on resize. ```ts const cleanupSizes = autoSizes(image, { updateOnResize: true }) const cleanupLoad = triggerLoad(image) // Later cleanupSizes() cleanupLoad() ``` -------------------------------- ### UnLazyImage with Multiple Image Sources Source: https://github.com/johannschopplich/unlazy/blob/main/docs/integrations/solid.md Render a `` element for format negotiation and art direction by passing an array of `sources`. Set `width` and `height` per source to prevent layout shifts. ```tsx import type { UnLazySource } from 'unlazy' const sources: UnLazySource[] = [ { type: 'image/avif', srcSet: 'hero.avif 1x, hero@2x.avif 2x' }, { media: '(max-width: 600px)', srcSet: 'hero-mobile.jpg', width: 480, height: 640, }, ] return ( ) ``` -------------------------------- ### Configure Module Options Source: https://github.com/johannschopplich/unlazy/blob/main/docs/integrations/nuxt.md Adapt the module options to your needs by setting them in your Nuxt configuration. ```typescript // `nuxt.config.ts` export default defineNuxtConfig({ modules: ['@unlazy/nuxt'], // Module options unlazy: { ssr: false } }) ``` -------------------------------- ### Multiple Image Sources with Picture Element Source: https://github.com/johannschopplich/unlazy/blob/main/docs/integrations/nuxt.md Configure multiple image sources for format negotiation and art direction using the `sources` prop. Each entry in the `sources` array renders a `` element within a `` tag. ```vue ``` -------------------------------- ### UnLazyImage with ThumbHash Placeholder Source: https://github.com/johannschopplich/unlazy/blob/main/docs/integrations/svelte.md Use the thumbhash prop for a blurry placeholder. It takes precedence over blurhash. ```svelte ``` -------------------------------- ### Update triggerLoad signature Source: https://github.com/johannschopplich/unlazy/blob/main/docs/guide/migration.md `triggerLoad` now takes an options object instead of positional callbacks and returns a cleanup function. ```diff - triggerLoad(image, onLoad, onError) + const cleanup = triggerLoad(image, { onImageLoad: onLoad, onImageError: onError }) + // Optional: cleanup() to cancel before the load completes ``` -------------------------------- ### UnLazyImage with Preload Enabled Source: https://github.com/johannschopplich/unlazy/blob/main/docs/integrations/solid.md Preload an image using the `preload` prop, useful for images in sliders or carousels where the next image should be fetched in advance. ```tsx return ( ) ``` -------------------------------- ### lazyLoad Source: https://github.com/johannschopplich/unlazy/blob/main/docs/api/index.md Initializes lazy loading for images on the page. It can also generate placeholder images. ```APIDOC ## lazyLoad ### Description Initializes lazy loading with placeholder generation. ### Import `unlazy` ### Purpose To enable and manage the lazy loading of images, including the creation of placeholders. ``` -------------------------------- ### Basic autoSizes Usage Source: https://github.com/johannschopplich/unlazy/blob/main/docs/api/auto-sizes.md Use autoSizes to resolve data-sizes="auto" attributes for images. This is a one-shot resolution. ```typescript import { autoSizes } from 'unlazy' // One-shot resolve autoSizes() ``` -------------------------------- ### UnLazyImage with BlurHash Placeholder Source: https://github.com/johannschopplich/unlazy/blob/main/docs/integrations/svelte.md Use the blurhash prop for a blurry placeholder. Ensure width and height are set. ```svelte ``` -------------------------------- ### Preload Image with UnLazyImage Source: https://github.com/johannschopplich/unlazy/blob/main/docs/integrations/vue.md Use the `preload` prop to ensure an image is fetched ahead of time, which is beneficial for components like sliders where the next image might be needed soon. ```vue ``` -------------------------------- ### triggerLoad Source: https://github.com/johannschopplich/unlazy/blob/main/docs/api/trigger-load.md Programmatically loads an image by swapping its data attributes to standard ones. It handles both standalone `` elements and images inside `` elements. It returns a cleanup function that detaches listeners and aborts in-flight network fetches. ```APIDOC ## triggerLoad ### Description Programmatically loads an image by swapping its `data-src` and `data-srcset` attributes to their standard counterparts. It handles images within `` elements by swapping `data-srcset` on `` elements and resolving `data-sizes="auto"`. For standalone `` elements, it preloads the image and calculates the `sizes` attribute if `data-sizes="auto"` is set. ### Parameters #### Path Parameters None #### Query Parameters None #### Request Body - **image** (HTMLImageElement | HTMLPictureElement) - Required - The image element or picture element to load. - **options** (object) - Optional - Configuration options. - **onImageLoad** (function) - Optional - Callback function invoked when the image successfully loads. Receives the image element as an argument. - **onImageError** (function) - Optional - Callback function invoked when the image fails to load. Receives the image element and the error as arguments. ### Request Example ```javascript import { triggerLoad } from 'unlazy' const image = document.querySelector('.priority-image')! // Load immediately with callbacks const cleanup = triggerLoad(image, { onImageLoad: img => console.log('Loaded:', img.src), onImageError: (img, error) => console.error('Failed to load:', img, error), }) // Later, cancel the load if it hasn't completed yet // cleanup() ``` ### Response #### Success Response Returns a cleanup function that detaches listeners and aborts in-flight network fetches if the load has not completed. #### Response Example ```javascript // Returns a function const cleanup = triggerLoad(image) // Call the cleanup function later // cleanup() ``` ### Error Handling On failure, a synthetic `error` event also fires on the visible `` element. ``` -------------------------------- ### UnLazyImage with BlurHash Placeholder Source: https://github.com/johannschopplich/unlazy/blob/main/docs/integrations/vue.md Use BlurHash for a compact, client-side generated placeholder. Ensure explicit width and height attributes are set when using BlurHash. ```html ``` -------------------------------- ### Create Placeholder from Image Element Source: https://github.com/johannschopplich/unlazy/blob/main/docs/api/create-placeholder-from-hash.md Generate a placeholder data URI by extracting the hash from an image element's `data-blurhash` or `data-thumbhash` attributes. The aspect ratio is automatically calculated from the image dimensions. ```typescript import { createPlaceholderFromHash } from 'unlazy' const img = document.querySelector('img') const placeholder = createPlaceholderFromHash({ image: img }) if (placeholder) { img.src = placeholder } ``` ```html ``` -------------------------------- ### Defining Image Sources with UnLazySource Source: https://github.com/johannschopplich/unlazy/blob/main/docs/guide/migration.md The `sources` prop is now supported across all adapters. Pass an array of `UnLazySource` objects to render a `` element with multiple `` children. ```typescript import type { UnLazySource } from 'unlazy' const sources: UnLazySource[] = [ { type: 'image/avif', srcSet: 'hero.avif 1x, hero@2x.avif 2x' }, { media: '(max-width: 600px)', srcSet: 'hero-mobile.jpg', width: 480, height: 640 }, ] ``` -------------------------------- ### Vue UnLazyImage with Multiple Sources for Art Direction Source: https://github.com/johannschopplich/unlazy/blob/main/docs/integrations/vue.md Configure multiple image sources for format negotiation (e.g., AVIF) and art direction based on media queries. Set width and height per source to prevent layout shifts. ```vue ``` -------------------------------- ### Updating Vue/Nuxt Image Event Handlers Source: https://github.com/johannschopplich/unlazy/blob/main/docs/guide/migration.md Migrate from `@loaded` to `@image-load` and implement `@image-error` for new error handling capabilities in Vue and Nuxt adapters. ```diff - + ``` -------------------------------- ### autoSizes Source: https://github.com/johannschopplich/unlazy/blob/main/docs/api/index.md Calculates the appropriate `sizes` attribute for images without initiating lazy loading. ```APIDOC ## autoSizes ### Description Calculates the `sizes` attribute for images without lazy loading. ### Import `unlazy` ### Purpose To determine the optimal `sizes` attribute for responsive images. ``` -------------------------------- ### UnLazyImage with BlurHash Placeholder Source: https://github.com/johannschopplich/unlazy/blob/main/docs/integrations/solid.md Use BlurHash for a lightweight, generated placeholder. Ensure explicit `width` and `height` props are set when using BlurHash. ```tsx return ( ) ``` -------------------------------- ### Create Placeholder from BlurHash String Source: https://github.com/johannschopplich/unlazy/blob/main/docs/api/create-placeholder-from-hash.md Use this snippet to generate a placeholder data URI from a BlurHash string. Specify the hash, hash type, size, and aspect ratio for decoding. ```typescript import { createPlaceholderFromHash } from 'unlazy' const placeholder = createPlaceholderFromHash({ hash: 'LKO2:N%2Tw=w]~RBVZRi};RPxuwH', hashType: 'blurhash', size: 32, ratio: 16 / 9 }) ``` -------------------------------- ### Lazy Load Image Tag Source: https://github.com/johannschopplich/unlazy/blob/main/docs/guide/usage.md Use this snippet with the `` tag to enable lazy loading. Ensure `loading="lazy"` is set and specify the high-quality image using `data-srcset`. ```html Descriptive text ``` -------------------------------- ### Vue Integration: Lazy Load with Cleanup Source: https://github.com/johannschopplich/unlazy/blob/main/docs/integrations/index.md In Vue, use `lazyLoad` within `onMounted` and ensure cleanup by calling the returned function in `onBeforeUnmount`. ```typescript import { lazyLoad } from 'unlazy' const target = ref() onMounted(() => { if (target.value) { const cleanup = lazyLoad(target.value) onBeforeUnmount(cleanup) } }) ``` -------------------------------- ### Vue Component for SSR Image Placeholder Source: https://github.com/johannschopplich/unlazy/blob/main/docs/advanced/ssr.md This Vue component demonstrates how to pre-compute and inline a placeholder during render time using `createPngDataUri` from 'unlazy/thumbhash'. It's suitable for SSR environments where the placeholder needs to be generated on the server. ```vue ``` -------------------------------- ### Initialize unlazy Lazy Loading Source: https://github.com/johannschopplich/unlazy/blob/main/packages/unlazy/README.md Import and call the `lazyLoad` function to process images with `loading="lazy"` or `loading="eager"` and `data-src`/`data-srcset` attributes. ```typescript import { lazyLoad } from 'unlazy' // Processes `img[loading="lazy"]` and `img[loading="eager"][data-src|data-srcset]` const cleanup = lazyLoad() ``` -------------------------------- ### Configure Nuxt Module Source: https://github.com/johannschopplich/unlazy/blob/main/packages/nuxt/README.md Add the @unlazy/nuxt module to your nuxt.config.ts file to enable its features. ```typescript export default defineNuxtConfig({ modules: ['@unlazy/nuxt'], }) ``` -------------------------------- ### Create PNG Data URI from ThumbHash Source: https://github.com/johannschopplich/unlazy/blob/main/docs/api/thumbhash-create-png-data-uri.md Use createPngDataUri with a ThumbHash string to generate a PNG data URI. This is useful for server-side rendering. ```typescript import { createPngDataUri } from 'unlazy/thumbhash' const thumbhash = '1QcSHQRnh493V4dIh4eXh1h4kJUI' const pngDataUri = createPngDataUri(thumbhash) ``` -------------------------------- ### triggerLoad Source: https://github.com/johannschopplich/unlazy/blob/main/docs/api/index.md Allows for the programmatic triggering of an image load. ```APIDOC ## triggerLoad ### Description Programmatically load an image immediately. ### Import `unlazy` ### Purpose To manually initiate the loading of an image at a specific point in time. ``` -------------------------------- ### SSR-decoded ThumbHash Source: https://github.com/johannschopplich/unlazy/blob/main/docs/integrations/nuxt.md Renders an image using ThumbHash decoded on the server. The `auto-sizes` prop helps in calculating the sizes attribute automatically. ```html ``` -------------------------------- ### autoSizes Source: https://github.com/johannschopplich/unlazy/blob/main/docs/api/auto-sizes.md Resolves `data-sizes="auto"` to a numeric pixel width based on the rendered display size. It works on standalone `` elements, on `` siblings inside a ``, or both. When called with an `` inside a ``, `autoSizes` walks to every `` sibling and resolves them in the same call. `` elements have no layout box of their own, so the rendered `` width is used instead. ```APIDOC ## autoSizes ### Description Resolves `data-sizes="auto"` to a numeric pixel width based on the rendered display size. It works on standalone `` elements, on `` siblings inside a ``, or both. When called with an `` inside a ``, `autoSizes` walks to every `` sibling and resolves them in the same call. `` elements have no layout box of their own, so the rendered `` width is used instead. ### Method `autoSizes(selector?: string, options?: AutoSizesOptions)` ### Parameters #### Path Parameters None #### Query Parameters None #### Request Body None ### Options - **updateOnResize** (`boolean`) - Optional (Default: `false`) - Install a debounced `ResizeObserver` that re-resolves `data-sizes="auto"` on viewport changes. The returned cleanup function disconnects it. ### Return Value `autoSizes` returns a cleanup function. When called with `updateOnResize: false` (or no options), the cleanup is a no-op. With `updateOnResize: true`, calling it disconnects every `ResizeObserver` created by that call. ### Request Example ```ts import { autoSizes } from 'unlazy' // One-shot resolve autoSizes() // Or: resolve and keep tracking on resize const cleanup = autoSizes(undefined, { updateOnResize: true }) // Later, when cleaning up // cleanup() ``` ### Response #### Success Response This function does not return a value in the traditional sense, but it modifies the `sizes` attribute of the matched elements or their siblings. ``` -------------------------------- ### createPngDataUri Source: https://github.com/johannschopplich/unlazy/blob/main/docs/api/thumbhash-create-png-data-uri.md Creates a PNG data URI from a ThumbHash string. This function decodes the base64-encoded ThumbHash into RGBA pixel data and then encodes it as a base64 PNG data URI. ```APIDOC ## createPngDataUri ### Description Creates a PNG data URI from a ThumbHash string for server-side rendering. This function decodes the base64-encoded ThumbHash into RGBA pixel data and encodes it as a base64 PNG data URI. ### Method Signature ```ts function createPngDataUri(hash: string): string ``` ### Parameters #### Path Parameters - **hash** (string) - Required - The base64-encoded ThumbHash string. ### Request Example ```ts import { createPngDataUri } from 'unlazy/thumbhash' const thumbhash = '1QcSHQRnh493V4dIh4eXh1h4kJUI' const pngDataUri = createPngDataUri(thumbhash) // pngDataUri will contain a PNG data URI ``` ### Response #### Success Response - **pngDataUri** (string) - A base64 encoded PNG data URI. ``` -------------------------------- ### Initialize Lazy Loading Source: https://github.com/johannschopplich/unlazy/blob/main/docs/guide/usage.md Import and call the `lazyLoad` function in your frontend code to activate lazy loading for all images with the `loading="lazy"` attribute. The returned cleanup function is essential for preventing memory leaks. ```typescript import { lazyLoad } from 'unlazy' // Lazily load all `img[loading="lazy"]` images const cleanup = lazyLoad() // Optional: Call cleanup() to remove event listeners and observers // Useful when unmounting components or removing images dynamically ``` -------------------------------- ### Import and Use UnLazyImage Component Source: https://github.com/johannschopplich/unlazy/blob/main/docs/integrations/solid.md Import the UnLazyImage component and use it in your Solid.js application. Supports blurhash, srcset, and autoSizes. ```tsx import { UnLazyImage } from '@unlazy/solid' export default function MyComponent() { return ( ) } ``` -------------------------------- ### UnLazyLoadOptions Source: https://github.com/johannschopplich/unlazy/blob/main/docs/api/index.md Defines the available options for configuring the `lazyLoad` function. ```APIDOC ## UnLazyLoadOptions ### Description Options for the `lazyLoad` function. ### Import `unlazy` ### Purpose To specify configuration settings when initializing lazy loading. ``` -------------------------------- ### Preload Image Source: https://github.com/johannschopplich/unlazy/blob/main/docs/integrations/nuxt.md Preload an image using the `preload` prop. This is useful for images that are part of a slider or need to be visible immediately. ```vue ``` -------------------------------- ### Lazy Load Picture Tag Source: https://github.com/johannschopplich/unlazy/blob/main/docs/guide/usage.md This snippet demonstrates lazy loading with the `` element, allowing for different image formats and responsive sources. Use `data-srcset` for various resolutions. ```html Descriptive text ``` -------------------------------- ### Lazy Load with Custom Options Source: https://github.com/johannschopplich/unlazy/blob/main/docs/api/lazy-load.md Configure `lazyLoad` behavior using an options object, such as enabling hash placeholders and setting placeholder size. ```typescript lazyLoad({ hash: true, placeholderSize: 64 }) ``` -------------------------------- ### Lazy Load with ThumbHash Source: https://github.com/johannschopplich/unlazy/blob/main/docs/api/lazy-load.md Use ThumbHash for blurry placeholders by setting the `hashType` option. ```typescript lazyLoad({ hashType: 'thumbhash' }) ``` -------------------------------- ### Replace isLazyLoadingSupported with native check Source: https://github.com/johannschopplich/unlazy/blob/main/docs/guide/migration.md The feature-detect for native `loading="lazy"` was removed. Replace direct imports with a native browser check. ```typescript const isLazyLoadingSupported = 'loading' in HTMLImageElement.prototype ``` -------------------------------- ### Lazy Load with Resize Update for Sizes Source: https://github.com/johannschopplich/unlazy/blob/main/docs/api/lazy-load.md Enable automatic re-evaluation of `data-sizes="auto"` on viewport resize. ```typescript lazyLoad({ updateSizesOnResize: true }) ``` -------------------------------- ### Handle native error event on preload failure Source: https://github.com/johannschopplich/unlazy/blob/main/docs/guide/migration.md v2 dispatches a synthetic `error` event on the visible `` when unlazy's off-DOM preload fails. Native `onerror` listeners now work for setting a fallback `src`. ```html ``` -------------------------------- ### Update `sizes` on Resize with `autoSizes` Source: https://github.com/johannschopplich/unlazy/blob/main/docs/guide/usage.md Enable automatic updates of the `sizes` attribute when the viewport resizes by passing `{ updateOnResize: true }` to `autoSizes`. Remember to call the returned cleanup function when it's no longer needed. ```typescript const cleanup = autoSizes(undefined, { updateOnResize: true }) // Later, when unmounting cleanup() ``` -------------------------------- ### Create PNG Data URI from BlurHash Source: https://github.com/johannschopplich/unlazy/blob/main/docs/api/blurhash-create-png-data-uri.md Decodes a BlurHash string and generates a PNG data URI. Optionally accepts `ratio` and `size` options for the output image dimensions. This is useful for server-side rendering. ```typescript import { createPngDataUri } from 'unlazy/blurhash' const pngDataUri = createPngDataUri(blurhash, { ratio: 16 / 9, size: 32 }) ``` -------------------------------- ### Using unlazy with HTML Picture Element Source: https://github.com/johannschopplich/unlazy/blob/main/docs/guide/usage.md unlazy supports the HTML picture element for art direction and format selection. Each source element should use 'data-srcset' and 'data-sizes' instead of 'srcset' and 'sizes'. unlazy automatically swaps these attributes upon image load. ```html Descriptive text ``` -------------------------------- ### Development-Mode LCP Warning Source: https://github.com/johannschopplich/unlazy/blob/main/docs/guide/core-web-vitals.md During development, unlazy monitors for `largest-contentful-paint` entries. If the LCP element is an `` still configured for lazy loading (e.g., `loading="lazy"` or has `data-src`), a warning is logged to the console. This warning can be stripped from production builds using the `__UNLAZY_LOGGING__` build flag. ```javascript [unlazy] LCP element is configured for lazy loading. Set `loading="eager"` to improve Largest Contentful Paint. ```