preact-lazyimage

Lazy image loading made easy and simple for preact.

Installation

npm i preact-lazyimage

Drop In Replacement!

// Old
<img src="./image"></img>

// Replace with:

// Lazy Image Loading
<LazyImg src="./image"></LazyImg>

Usage

import { h } from 'preact';

import LazyImg from 'preact-lazyimage';

const App = () => <LazyImg style={{width: '40px', height: '40px'}} src="./icon.png"></LazyImg>;

render(<App/>, document.body);

Looking for lazy loading other elements? Check out preact-lazyload

Properties

<LazyImg
  onLoad={imgElement => {}}		// Triggered when image loads
  onUnload={imgElement => {}}	// Triggered when image unloads
  delay={0}			// Delay lazy loading in milliseconds
  cache={true}		// Enable/Disable caching of images; true by default
  src={src}			// Set source for image
  legacy={false}	// Use getBoundingClientRect instead of IntersectionObservers
  preloadWidth={0}	// Preload the images with an offset width, legacy must be set to `true`
  preloadHeight={0}	// Preload the images with an offset height, legacy must be set to `true`
  {...props}	// Remaining properties are applied onto the image element
></LazyImg>