README
react-hook-lazy-image 图片懒加载
一个应用React Hooks基于IntersectionObserver API实现的图片懒加载组件,具有如下特点:
- 简单好用,配置灵活
- 兼容主流浏览器
- 使用React Hooks实现
- 使用TypeScript
安装
// 使用yarn安装
yarn add react-hook-lazy-image
// 使用npm安装
npm install react-hook-lazy-image --save
使用
import React from 'react';
import LazyImage from 'react-hook-lazy-image';
const list = [ // image src url ...];
const LazyLoad:React.FC<any> = () => {
const clientHeight = window.innerHeight;
const style = {height: 300, width: 400, border: '1px solid #000', margin: '10px'};
return (
<ul style={{height: `${clientHeight-100}px`, overflow: 'auto'}}>
{
list.map((item, i) => (
<LazyImage style={style} src={item} key={i} />
))
}
</ul>
)
}
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