安装依赖
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);
内容出处:,
声明:本网站所收集的部分公开资料来源于互联网,转载的目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品,请与我们取得联系,我们会及时修改或删除。文章链接:http://www.yixao.com/procedure/27939.html