艺宵网 程序开发 加载react-lazyload让你的前端页面飞起来

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

安装依赖 cnpm install react-lazyload –save 使用方法 impor…

安装依赖

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.net/procedure/27939.html
Vedu

作者: Vedu

这个人很懒,什么都没有留下~

发表评论

联系我们

联系我们

15378714280

在线咨询: QQ交谈

邮箱: yixaonet@163.com

工作时间:周一至周五,9:00-17:30,节假日休息

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

关注微博
返回顶部