react-scroll-load

一个用于懒加载(滚动加载)的 React 组件

• 基于IntersectionObserver实现(兼容低版本浏览器)
• 不添加额外DOM结构，不影响布局
• 局部/全局懒加载

  <div>
    <div>prev content</div>
    <ScrollLoad placeholder={<PlaceholderComponent />}>
      <LazyComponent />
    </ScrollLoad>
    <div>next content</div>
  </div>

安装

$ yarn add react-scroll-load

使用

一个简易的demo 打开开发者工具查看 DOM 变化

import React, { Component } from 'react'
import { render } from 'react-dom'
import ScrollLoad from 'react-scroll-load'
class App extends Component {
  render() {
    return (
      <div style={{ width: 600, height: 400, overflow: 'auto' }}>
        <div style={{ height: 200, backgroundColor: 'gray' }}></div>
        <ScrollLoad
          placeholder={<div style={{ height: 100 }}>placeholder</div>}
        >
          <div>content</div>
        </ScrollLoad>
      </div>
    )
  }
}
 
render(<App />, document.getElementById('app'))

props

{
    // 未加载前占位组件，默认为null
  placeholder: JSX.Element,
 
    // 设置滚动方向上的偏移
    // 正数：增加触发距离(可见后再滚动`offset`距离)
    // 负数：减少触发距离，提前加载(注意：指定负数offset不要超过placeholder对应宽高的1/2)
    offset?: number,
    // 加载内容时的回调
    onLoad?: () => void
}

更新日志

见ChangeLog