图片懒加载应用

2020-05-24 2506

欢迎阅读，本文将介绍一款好用轻量的懒加载插件。

前言

在图片懒加载原理篇我们讨论到，有两种方式可以实现图片懒加载：

方法一：

可监听滚动条的 scoll 事件实现图片懒加载，但操作DOM次数过多，处理不好，容易造成网页性能问题

方法二：

使用新的原生 标签:IntersectionObserver API 监听图片是否进入可视区域，但其兼容性不好，可以配合使用 IntersectionObserver polyfill 解决兼容性问题，附参考链接: https://github.com/w3c/IntersectionObserver/tree/master/polyfill

现提供方法三：

使用 react-lazyload 实现 图片 及组件 的懒加载，附参考链接： https://github.com/twobin/react-lazyload

为什么选择使用react-lazyload？

  1. 考虑到性能，所有延迟加载的组件只有2个事件侦听器
  2. 同时支持 one-time lazy load 和 continuous lazy load 模式
  3. scroll / resize 事件处理程序受到限制，因此不会遇到频繁的更新，当让你也可以设置 debounce 模式， （ debounce 与 throttle 是开发中常用的高阶函数，作用都是为了防止函数被高频调用，换句话说就是，用来控制某个函数在一定时间内执行多少次）
  4. 目前 github 已有 4.5k 的star数
  5. 实际项目中，即可用于懒加载图片，又可懒加载组件（可用于实现滚动加载长列表功能）

react-lazyload 的使用

  1. 安装
    1
    npm install --save react-lazyload
  2. 使用
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    import React from 'react';
    import ReactDOM from 'react-dom';
    import LazyLoad from 'react-lazyload';
    import MyComponent from './MyComponent';

    const App = () => {
      return (
        <div className="list">
         /*
          * 懒加载图片，设置高度为200
          */
          <LazyLoad height={200}>
            <img src="tiger.jpg" /> 
          </LazyLoad>
          /*
          * 懒加载自定义组件
          */
          <LazyLoad>
            <MyComponent />
          </LazyLoad>
          /*
          * 懒加载自定义组件
          */
          <LazyLoad height={200} once offset={100}>
            <MyComponent />
          </LazyLoad>
        </div>
      );
    };

    ReactDOM.render(<App />, document.body);
  3. 属性及默认值
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    LazyLoad.propTypes = {
      scrollContainer: PropTypes.oneOfType([PropTypes.String，PropTypes.DOM), // 滚动试图，默认是window，也可自定义
      height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
      once: PropTypes.bool,
      offset: PropTypes.oneOfType([PropTypes.number, PropTypes.arrayOf(PropTypes.number)]),
      overflow: PropTypes.bool, // 不是 window 滚动，而使用了 overflow: scroll 
      resize: PropTypes.bool, // 是否监听 resize
      scroll: PropTypes.bool, // 是否监听滚动
      children: PropTypes.node,
      throttle: PropTypes.oneOfType([PropTypes.number, PropTypes.bool]), // 监听触发频率
      debounce: PropTypes.oneOfType([PropTypes.number, PropTypes.bool]), // 控制滚动事件
      placeholder: PropTypes.node,
      scrollContainer: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
      unmountIfInvisible: PropTypes.bool,
      preventLoading: PropTypes.bool
    };
    // 默认值
    LazyLoad.defaultProps = {
      once: false,
      offset: 0,
      overflow: false,
      resize: false,
      scroll: true,
      unmountIfInvisible: false,
      preventLoading: false,
    };