Registry / testing / svelte-lazyimage-cache

svelte-lazyimage-cache

JSON →
library1.0.9-remakejsnpmunverified

A Svelte/SvelteKit action for lazy-loading images with IntersectionObserver and built-in cache reuse. Current stable version is 1.0.9-remake (note: semver-like but with '-remake' suffix, indicating a special release). It checks a browser cache before fetching images from the network; subsequent loads with the same src use the cached image, reducing network requests. Key differentiators: lightweight, no additional dependencies, provides custom events (cacheload, imgload) for tracking load sources. Release cadence is irregular; the package has only a few versions. Suitable for image-heavy Svelte apps wanting to minimize bandwidth.

testing
npm install svelte-lazyimage-cache
github ↗package ↗homepage ↗
INSTALL
IMPORT
SIG · SVELTE-LAZYIMAGE-C
S
svelte-lazyimage-cache
testingjavascriptv1.0.9-remake
harness data pending
Install & Compatibility
Where this runs

No compatibility data collected yet for this library.

Code
Verified usage

Verified import paths — ran on the pinned version, not inferred.

lazyimage
✓ import { lazyimage } from 'svelte-lazyimage-cache'
✗ import lazyimage from 'svelte-lazyimage-cache'
The lazyimage action is a named export, not a default export. Also note that the package ships TypeScript types, so TS usage is supported.

Shows how to use the lazyimage action with caching enabled, placeholder src, and custom events for load source tracking.

<script> import { lazyimage } from 'svelte-lazyimage-cache'; const placeholder = 'data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22%3E%3Crect fill=%22%23cccccc%22 width=%22100%22 height=%22100%22/%3E%3C/svg%3E'; const src = process.env.PUBLIC_IMAGE_URL ?? 'https://picsum.photos/200/300'; const alt = 'Random image'; </script> <img use:lazyimage={{cache: true}} src={placeholder} data-src={src} {alt} on:cacheload={() => console.log('Loaded from cache')} on:imgload={() => console.log('Loaded from network')}/>
Debug
Known issues
gotchaThe package version includes a '-remake' suffix (1.0.9-remake). This is non-standard semver and may cause issues with version comparison tools or automated dependency updates. Verify compatibility.
fix
Pin to this specific version in package.json: "svelte-lazyimage-cache": "1.0.9-remake" and update manually when new versions appear.
affects: 1.0.9-remake
gotchaThe action uses IntersectionObserver. If the browser doesn't support it, images will never load unless a polyfill is provided.
fix
Add an IntersectionObserver polyfill (e.g., core-js or intersection-observer) for older browsers.
affects: *
deprecatedThe package uses 'cache' option as a boolean (e.g., {cache: true}). There is no deprecation notice in the README, but the option may change in future versions. Keep an eye on updates.
fix
Review changelog when updating and adapt to any new configuration API.
affects: >=1.0.0
gotchaCustom events 'cacheload' and 'imgload' are dispatched on the img element. Ensure you listen with Svelte's on: directive, not addEventListener, or that you handle both.
fix
Use on:cacheload and on:imgload in Svelte templates. For programmatic usage, use element.addEventListener with caution.
affects: *
gotchaThe package is installed as a devDependency (--save-dev). This is unusual for a runtime action. It may still work in production, but verify your build process treats it correctly.
fix
If you get build errors in production, move it to dependencies: npm install svelte-lazyimage-cache (without --save-dev).
affects: *
Errors
Common errors & fixes
Cannot find module 'svelte-lazyimage-cache' or its corresponding type declarations.
The package is installed as a devDependency but is used in runtime code, or the import path is wrong.
fix
Ensure the package is in your dependencies (npm install svelte-lazyimage-cache) and import using: import { lazyimage } from 'svelte-lazyimage-cache'.
Uncaught ReferenceError: IntersectionObserver is not defined
Browser does not support IntersectionObserver (e.g., old browsers or server-side rendering without polyfill).
fix
Install and import an IntersectionObserver polyfill in your app entry point: npm install intersection-observer and then 'intersection-observer'.
TypeError: Failed to execute 'observe' on 'IntersectionObserver': parameter 1 is not of type 'Element'.
The lazyimage action is applied to an element that does not exist or is not a valid DOM element (e.g., null ref).
fix
Ensure the action is used on a valid HTML element, e.g., <img use:lazyimage> and that the element is mounted before the action runs.
Image not loading with cache:true, always loads from network.
The cache key is URL-based but might not match if the same image is served with different query params or protocol (http vs https).
fix
Use consistent URLs (same protocol, no random query strings) for the same image. The cache is a simple object mapping URLs to cached Image objects.
Upgrade
Version history
1.0.9-remakelatest on npm
Audit
Dependencies

No dependency data recorded yet.

Agent activity
7 hits · last 30 days
node
6
Resources
githubhttps://github.com/binsarjr/svelte-lazyimage-cache ↗
packagesvelte-lazyimage-cache ↗
homepagehttps://github.com/binsarjr/svelte-lazyimage-cache#readme ↗