0.1.2 • Published 4 years ago
lazy-load-img-hook v0.1.2
Lazy Load Image
Image lazy loading component based on react hooks and IntersectionObserver;
Install
npm install lazy-load-img-hook
Supports Props
// loading图片 可选
loadingImgURL?: string;
// 图片链接
src: string;
// 图片加载失败展示图片
errorImgURL?: string;
// 承载图片容器样式
style?: CSSProperties;
// img 标签上的所有属性 排除src
imgOptions?: Omit<ImgHTMLAttributes<HTMLImageElement>, 'src'>;
// IntersectionObserver支持的属性
options?: IntersectionObserver;
Basic Usage
<LazyLoadImg
src='https://img.alicdn.com/bao/uploaded/i1/2207626746794/O1CN01gMwL08203hU9QmV93_!!0-item_pic.jpg'
style={{ width: '80px', height: '80px' }}
imgOptions={{
alt: '商品图片',
}}
/>,