谈一谈react-lazyload插件

前言

因为是个论坛类的项目，所以在列表中有大量的图片，因此图片懒加载就变得必不可少了。项目是用react搭建的 所以就去网上找了一下好用的react懒加载组件，最后选用的github上start比较多的 react-lazyload api地址>>

正文

ok，打开api，看了一下具体用法

import React from ‘react’;
import LazyLoad from ‘react-lazy-load’;

const MyComponent = () => (
<div>
Scroll to load images.
<div className=“filler” />
<LazyLoad height={762} offsetVertical={300}>
<img src=‘http://apod.nasa.gov/apod/image/1502/HDR_MVMQ20Feb2015ouellet1024.jpg’ />
</LazyLoad>
<div className=“filler” />
<LazyLoad height={683} offsetTop={200}>
<img src=‘http://apod.nasa.gov/apod/image/1502/2015_02_20_conj_bourque1024.jpg’ />
</LazyLoad>
<div className=“filler” />
<LazyLoad height={480} offsetHorizontal={50}>
<img src=‘http://apod.nasa.gov/apod/image/1502/MarsPlume_jaeschke_480.gif’ />
</LazyLoad>
<div className=“filler” />
<LazyLoad
height={720}
onContentVisible={() => console.log(‘look ma I have been lazyloaded!’)}
>
<img src=‘http://apod.nasa.gov/apod/image/1502/ToadSky_Lane_1080_annotated.jpg’ />
</LazyLoad>
<div className=“filler” />
</div>
)

很好，简单的复制到自己的项目当中，本期待着懒加载就这么实现了，然而，事情并没有那么简单。

<LazyLoad key={index} height={200}>
<img alt="" src={imgUrl + x}></img>
</LazyLoad>

然后看效果，发现除了第一张图片显示以外，其他图片都没显示，然后开始看代码。
import LazyLoad from ‘react-lazyload’;
所以我们先去 node_modules 下去查找 react-lazyload 这个文件夹
文件结构如下：

然后我们去寻找入口文件，package.json 中的main 指向 “lib/index.js“
顺便看了一下utils中文件 debounce.js : 函数消抖、throttle.js : 事件节流 、event.js : 事件绑定、scrollParent.js : 获取最近的父容器

---

然后来到我们的重点：index.js
首先，我们对图片懒加载有个大概的认知就是对父元素添加scroll和resize两个，然后判断当前图片是否在视图范围内，最后决定渲染的内容。所以，最重要的就是判断,是否应该展示。看一下Lazyload的render

function render() {
return this.visible ? this.props.children : this.props.placeholder ? this.props.placeholder : _react2.default.createElement(‘div’, { style: { height: this.props.height }, className: ‘lazyload-placeholder’ });
}

如图，visible就是判断是否展示的关键。 isOverflow 则是用来决定到底是通过哪种方式来判定。 大概看了一下checkOverflowVisible 和 ** checkNormalVisible** 两个函数，一个是跟父元素做比较，一个是跟视图做比较。所以设定component.props.overflow 为true 效果就实现了！

<LazyLoad key={index} height={200} overflow={true}>
<img alt="" src={imgUrl + x}></img>
</LazyLoad>

结尾

所以有时候用别人的组件就需要去理解别人代码的原理，尤其是文档讲得不是很清楚的，这样才能更好的利用和改造别人的组件。