关于前端:reactlazyload-使用文档

劣势

  • 整个组件只有两个监听事件
  • 反对one-time 和 continue 两种懒加载模式
  • scroll和resize办法通过throttle解决,也能够切换为debounce模式
  • 反对装璜器
  • 对服务端渲染敌对
  • 通过严格的测试

应用办法


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>
        <LazyLoad height={200} once >
          <MyComponent />
        </LazyLoad>
        <LazyLoad height={200} offset={100}>
          <MyComponent />
        </LazyLoad>
        <LazyLoad>
          <MyComponent />
        </LazyLoad>
      </div>
    );
};

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

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理