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

@youngwind 2016-01-14 11:56:44发表于 youngwind/blog React

前言

以前用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="http://pic2.ooopic.com/01/03/51/25b1OOOPIC19.jpg" alt=""/>
          <img src="http://img.taopic.com/uploads/allimg/130501/240451-13050106450911.jpg" alt=""/>
          <img src="http://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="http://pic2.ooopic.com/01/03/51/25b1OOOPIC19.jpg" alt=""/>
        </LazyLoad>
        <LazyLoad>
          <img src="http://img.taopic.com/uploads/allimg/130501/240451-13050106450911.jpg" alt=""/>
        </LazyLoad>
        <LazyLoad>
          <img src="http://pic.nipic.com/2007-11-09/200711912453162_2.jpg" alt=""/>
        </LazyLoad>

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