关于前端:reactlazyload-使用文档

67次阅读

共计 522 个字符,预计需要花费 2 分钟才能阅读完成。

劣势

  • 整个组件只有两个监听事件
  • 反对 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);

正文完
 0