react-hook-lazy-image
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.1 • Public • Published

    lazyImage

    GitHub package.json version npm npm bundle size

    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

    Install

    npm i react-hook-lazy-image

    DownloadsWeekly Downloads

    33

    Version

    1.1.1

    License

    MIT

    Unpacked Size

    16 kB

    Total Files

    5

    Last publish

    Collaborators

    • lujun_smile