react-hook-lazy-image 图片懒加载

一个应用React Hooks基于IntersectionObserver API实现的图片懒加载组件，具有如下特点：

- 简单好用，配置灵活
- 兼容主流浏览器
- 使用React Hooks实现
- 使用TypeScript

安装

``jsx
// 使用yarn安装
yarn add react-hook-lazy-image

// 使用npm安装
npm install react-hook-lazy-image --save
`

使用

`jsx
import React from 'react';
import LazyImage from 'react-hook-lazy-image';

const list = [ // image src url ...];

const LazyLoad:React.FC = () => {
const clientHeight = window.innerHeight;

const style = {height: 300, width: 400, border: '1px solid #000', margin: '10px'};

return (

${clientHeight-100}px, overflow: 'auto'}}>
{
list.map((item, i) => (

))
}



)
}

export default LazyLoad;
``

API

| 属性 | 类型 | 是否必填 | 默认值 | 描述 |
| --- | --- | --- | --- | --- |
| src | string | 否 | - | 图片的真实src,不传默认显示占位图 |
| defaultSrc | string | 否 | LazyImage占位图 | 默认渲染的占位图src地址 |
| style | object | 否 | {  width: 300,  height: 200 } | 图片样式 |
| options | object | 否 | - | 自定义配置，通过配置可以指定图片与特定的父级元素交叉时才去加载真实图片，祥见IntersectionObserver |

最后

如果觉得好用，请点个star支持一下哈~

如果在使用过程中有任何问题或者建议，可以在项目中提交issue，或者通过邮件与我取得联系，我会及时处理~
email：lujun5068@gmail.com