安装依赖

cnpm install react-lazyload –save

使用方法

import React from 'react';
import ReactDOM from 'react-dom';
import LazyLoad from 'react-lazyload';
import MyComponent from './MyComponent';

const App = () => {
  return (
    <div className="list">
      <LazyLoad height={200}>
        <img src="tiger.jpg" /> /*
                                  在第一轮渲染中，如果没有提供占位符，LazyLoad将为您的组件渲染一个占位符，并测量该组件是否可见。height正确设置将使LazyLoad更加精确地计算。该值可以是数字或类似的字符串'100%'。您也可以使用CSS设置占位符的高度，而不要使用height  */
      </LazyLoad>
      <LazyLoad height={200} once >
                                /* 一旦加载了延迟加载的组件，就不再检测滚动/调整大小事件。对于图像或简单组件很有用  */
        <img src="tiger.jpg" />
      </LazyLoad>
      <LazyLoad height={200} offset={100}>
                              /* 假设即使您要预先加载某个组件，即使该组件位于视口下方100像素（用户必须滚动100像素才能看到此组件），也可以将offsetprops 设置为100。另一方面，如果您想延迟加载组件，即使其顶部边缘已经出现在视口中，请将其设置offset为负数 */
        <MyComponent />
      </LazyLoad>
      <LazyLoad>
        <MyComponent />
      </LazyLoad>
    </div>
  );
};

ReactDOM.render(<App />, document.body);