React-hook-lazy-image NPM

一个应用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