react-hook-lazy-image

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：[e-mail]