投稿

加载react-lazyload让你的前端页面飞起来

Vedu • • 程序开发 • 阅读 521

安装依赖

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

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
VeduVedu
0 0
上一篇 2021-08-25 06:12
下一篇 2021-08-25 06:17

相关推荐

发表评论

登录后才能评论