@lumu/lazyload

react lazyload

安装

npm install --save @lumu/lazyload

API

参数	说明	类型	默认值
children	必选，懒加载组件	React.ReactNode	-
loading	必选，占位组件	React.ReactNode	-
scrollContainer	可选，滚动容器	string/dom	document.body
offset	可选，偏移量	number/Array(number)	0
resize	可选，是否监听resize事件	boolean	false
debounce	可选，防抖时间，优先级高于节流	number	0
throttle	可选，节流时间，优先级低于防抖	number	0

完整用法

const App = () => {
    return (
        <React.Fragment>
            {
                new Array(10).fill(1).map((_, index) => (
                    <Lazyload
                        resize
                        scrollContainer={document.getElementById('root') as HTMLDivElement}
                        debounce={300}
                        offset={50}
                        loading={<Loading/>}
                        key={index}>
                        <img alt="" src="https://img01.yzcdn.cn/vant/apple-1.jpg" width="100%" height="300"/>    
                    </Lazyload>
                ))
            }
        </React.Fragment>
    )
}

License

MTI © wenlei0617