@montagejs/react-lazy-load-image

React-Lazy-Load-Image

react image lazy loading component with built-in image preloading capabilities.

Usage

$ npm i @montagejs/react-lazy-load-image --save

import { FC } from 'react';
import ReactLazyLoadImage, { ReactLazyLoadImageProvider } from '@montagejs/react-lazy-load-image';

const ReactLazyLoadImageDemo: FC = () => {

    return (
        <ReactLazyLoadImageProvider
            getPopupContainer={() => document.querySelector('.img-container')}
        >
            <div className="img-container" >
                <ReactLazyLoadImage
                    src={
                        'xxxx'
                    }
                />
            </div>
        </ReactLazyLoadImageProvider>
    );
};

export default ReactLazyLoadImageDemo;

API

Main parameter configuration：

ReactLazyLoadImageProvider

props	desc	type	default	version
getPopupContainer	A container that listens to viewport scrolling	() => HTMLElement	() => document.documentContent	>0.0.4
preload	Whether to enable preloading	boolean ｜ { src: string; }	false	>0.0.4
disabledLoading	Whether to disable native loading	boolean	false	>0.0.4

ReactLazyLoadImage

Props is consistent with native img.