Lazy image loader for react
$ npm install @tjoskar/react-lazyload-img
import React, { Component } from 'react'
import { LazyLoadImage, LazyLoadBackgroundImage } from '@tjoskar/react-lazyload-img'
const App = () => {
const defaultImage = 'https://www.placecage.com/1000/1000'
const image = 'https://images.unsplash.com/photo-1443890923422-7819ed4101c0?fm=jpg'
return (
<>
{ /* To use an img-tag */ }
<LazyLoadImage width={50} height="200px" defaultImage={this.defaultImage} image={this.image} />
{ /* To use a div-tag with background image styling */ }
<LazyLoadBackgroundImage width="100%" height="200px" defaultImage={this.defaultImage} image={this.image} />
</>
)
}You can also pass options (root, rootMargin, threshold) to the IntersectionObserver constructor. See the documentation for IntersectionObserver for more info. Eg.
<LazyLoadImage options={{ root: window }} height="200px" defaultImage={this.defaultImage} image={this.image} />See: https://stackblitz.com/edit/react-lazy-load-image for examples
Both LazyLoadImage and LazyLoadBackgroundImage have the same props:
Type: string
Path to the default image (placeholder) to show before the lazy loading
Type: string
Default: 60
Path to the image to be lazy loaded
Type: string
Path to an image to show if the loading of image fails, will use defaultImage if not set
Type: () => void
Callback function after the image has been loaded
Type: ObserverOptions
IntersectionObserver options. https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Intersection_observer_options
Type: React.CSSProperties
Will be passed to the underlying div/img tag
Type: number | string
The height of the image (can be set to auto)
Type: number | string
The width of the image (can be set to auto)
The browser you are targeting needs to have support for IntersectionObserver and WeakMap or you need to import polyfill for them. You also need to use a bundler that understand es-modules (eg. webpack, rollup, parcel, fusebox, etc.)
MIT