react-lazyload第一轮渲染中，如果没有提供占位符，LazyLoad将为您的组件渲染一个占位符，并测量该组件是

为什么更好

考虑到性能，所有lazy-loaded组件只有2个事件侦听器
同时支持one-time lazy load和continuous lazy load模式
scroll/resize事件处理程序被限制，这样您就不会受到频繁更新的影响，您也可以切换到解除触发模式
Decorator supported
服务器端呈现友好
Thoroughly tested

Installation

2.0.0终于出来了，看看升级指南，升级几乎是无痛的！3.0.0通过使用React ref修复了findDomNode警告，下面是您需要注意的更改

现在我们有了一个额外的div来包装React ref的延迟加载组件
我们可以理解它是一个额外的DOM节点，如果可能的话，我们正在努力优化它
根据使用情况，它可能会破坏UI或快照测试
要定制额外div的样式，请参考这里
如有其他问题，请在这里留言

$ npm install --save react-lazyload

如果您希望默认情况下延迟加载组件，请尝试使用以下便捷的装饰器：

import { lazyload } from 'react-lazyload';

@lazyload({
  height: 200,
  once: true,
  offset: 100
})
class MyComponent extends React.Component {
  render() {
    return <div>this component is lazyloaded by default!</div>;
  }
}

Special Tips

您应该知道，在渲染占位符之前，只有当组件在视口中可见时才会装入它。

因此，您可以在组件的componentDidMount中安全地发送请求，而无需担心性能损失或添加一些漂亮的输入效果，请参阅此演示以了解更多详细信息。

使用方法（v2.6.5）

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>
  );
};