react滚动加载之——react-lazy-load

[youngwind]

前言

以前用jquery开发的时候经常使用jquery.lazyload进行图片的滚动加载，但是到了react体系之后就不太好了，因为不能直接操作DOM元素。所以就找了这个组件react-lazy-load。

使用方法

1. 安装

npm install --save react-lazy-load

2. 编写组件

import React from "react";
import LazyLoad from "react-lazy-load";

const Table = React.createClass({
  render: function () {
    return (
      <div>
        <LazyLoad>
          <h1>我是延时加载出来的</h1>
          <img src="https://pic2.ooopic.com/01/03/51/25b1OOOPIC19.jpg" alt=""/>
          <img src="https://img.taopic.com/uploads/allimg/130501/240451-13050106450911.jpg" alt=""/>
          <img src="https://pic.nipic.com/2007-11-09/200711912453162_2.jpg" alt=""/>
          <h1>我是延时加载出来的</h1>
        </LazyLoad>
      </div>
    );
  }
});

module.exports = Table;

3. 问题

这样子的写法有一个问题，那就是页面render的时候，组件table就会render，只是没显示出来而已。这意味着，如果这个组件需要异步请求数据，那么这个异步请求还是没有办法实现滚动到了再请求的。我想了一个解决方案，那就是：“在要滚动加载的组件中取出，然后把写在其父组件当中，亲测有效。

4. 优化

多重LazyLoad能够更好地引用滚动加载。拿上面的组件举例。上面的一个组件包含3张图片，每一张图片都比较高，所以，以每张图片为滚动加载最小单位，而不是以组件为最小单位，显然能够更好地发挥滚动加载。代码大概改成这个样子。

const Table = React.createClass({

  render: function () {
    return (
      <div>
        <h1>我是延时加载出来的</h1>
        <LazyLoad>
          <img src="https://pic2.ooopic.com/01/03/51/25b1OOOPIC19.jpg" alt=""/>
        </LazyLoad>
        <LazyLoad>
          <img src="https://img.taopic.com/uploads/allimg/130501/240451-13050106450911.jpg" alt=""/>
        </LazyLoad>
        <LazyLoad>
          <img src="https://pic.nipic.com/2007-11-09/200711912453162_2.jpg" alt=""/>
        </LazyLoad>

        <h1>我是延时加载出来的</h1>
      </div>
    );
  }
});

[YuArtian]

<-- 那就是：“在要滚动加载的组件中取出，然后把写在其父组件当中，亲测有效。-->
偶尔看到了你的文章。。。

[Xiaolong145682]

横向滑动加载图片可以用这个插件吗，有大神知道吗，求解？

[huyansheng3]

@Xiaolong145682 可以使用，该组件会判断自身是否在 viewport 中，再渲染 this.props.children

[rayle2]

浏览器报 require is not defined 怎么解决