摘要：清楚自己想要什么樣的組件，就自己動手?jǐn)]唄。咱們先來看看它的效果吧如果大家有時間，窩還是鼓勵大家自己動手實(shí)現(xiàn)一些小插件。于是自己就琢磨能否繼承使用方法同時保持特有組件特性。需要確保已安裝。

副標(biāo)題----為什么我要寫這個 react 插件

圖片懶加載是項(xiàng)目中常用的功能，然而現(xiàn)有 react 懶加載組件庫，用著都不是很爽了 ?。概括一下有如下幾點(diǎn)：

沒有只針對 image 懶加載組件。多數(shù)組件庫都內(nèi)置了模塊、組件、腳本、iframe 懶加載功能，而弱化了 image 懶加載功能。

不支持動畫顯示效果。

不靈活，可配置度不高。

placeholder 不能組件化。

不支持響應(yīng)式圖片( picture / srcset )。

react-lazyimg-component

清楚自己想要什么樣的組件，就自己動手?jǐn)]唄 ?。于是乎，react-lazyimg-component 就誕生了 ?。咱們先來看看它的效果吧：

singsong: 如果大家有時間，窩還是鼓勵大家自己動手實(shí)現(xiàn)一些小插件。

PC 預(yù)覽：

使勁猛擊這里

手機(jī)預(yù)覽(掃一掃)：

什么情況需要使用它 1. 小巧輕便，簡單易用，基本無學(xué)習(xí)成本

在那個 jQuery 一統(tǒng)天下的年代，擼代碼就用 jQuery 一把梭。其中
jQuery.lazyload 是一個很常用圖片懶加載插件。 可能很多像我一樣的小伙伴們，懶加載就直接上 jQuery.lazyload，早已習(xí)慣了 jQuery.lazyload 使用。 于是自己就琢磨能否繼承 jQuery.lazyload 使用方法同時保持 react 特有組件特性。這樣可以很快上手~?

singsong: 這里只是繼承了 jQuery.lazyload 配置特性，不是完全繼承。畢竟 jQuery 與現(xiàn)在主流的 MVVM 框架思想截然不同。

如果小伙伴們熟悉 jQuery.lazyload ， 完全沒有學(xué)習(xí)成本直接上手 react-lazyimg-component 哈。 只說不是寫，然并卵。那我們來看看它到底好用不：

安裝

// npm
$> npm install react-lazyimg-component
// yarn
$> yarn add react-lazyimg-component

使用

// 引入
import Lazyimg, { withLazyimg } from "react-lazyimg-component";

// 調(diào)用
;

是不是很簡單，有木有 ?。上述只是使用 react-lazyimg-component 的默認(rèn)配置。 這里我們可以通過配置項(xiàng)來定制懶加載的行為：

// 引入 lazyimg
import Lazyimg, { withLazyimg } from "react-lazyimg-component";
// 引入 volecity.js
import "velocity-animate";
import "velocity-animate/velocity.ui";

// 配置
const config = {
  threshold: 100, // 指定觸發(fā)閾值
  js_effect: "transition.fadeIn", // 支持 velocity.js 動畫效果
};
// 基于配置項(xiàng)生成對應(yīng) Lazy 組件
const Lazy = withLazyimg(config);

// 調(diào)用
;

接下來我們來看看 react-lazyimg-component 都那些配置項(xiàng)：

threshold: 0, // 指定距離底部多少距離時觸發(fā)加載
event: "scroll", // 指定觸發(fā)事件，默認(rèn)為"scroll"
js_effect: undefined, // 顯示圖片的js動畫效果
css_effect: undefined, // 顯示圖片的css動畫效果
container: window, // 指定容器，默認(rèn)為window
parent: undefined, // 可以指定動畫效果作用于元素的哪個父級元素
appear: null, // 元素出現(xiàn)在可視窗口時觸發(fā)appear鉤子函數(shù)
load: null,  // 元素圖片的加載完后觸發(fā)load鉤子函數(shù)
error: null, // 圖片加載出錯時觸發(fā)error鉤子函數(shù)
node_type: "img", // 指定生成的節(jié)點(diǎn)類型，默認(rèn)為"img"
placeholder: // 占位元素，除了支持普通的圖片外，還支持react組件。
  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC",

是不是很眼熟 ?，如果你熟悉 jquery.lazyload，那么你只需了解如下幾個配置項(xiàng)即可：

js_effect: 指定元素顯示的動畫效果，基于velocity.js動畫實(shí)現(xiàn)。使用之前需加載velocity.js。

css_effect: 指定元素顯示的動畫效果，基于animate.css動畫實(shí)現(xiàn)。使用之前需安裝animate.css。

parent: 用于指定動畫效果作用于元素的哪個父級元素。可取值：

父元素的 selector 選擇器（字符串）

父級層級 level（整數(shù)）

node_type: 指定 react 將生成的元素類型，默認(rèn)為"img"。

placeholder: 占位元素，除了支持普通的圖片外，還支持 react 組件。

2. 支持 velocity.js、animate.css 動畫效果庫，及自定動畫效果。同時還支持動畫效果作用于父級元素。

指定 js-effect 配置項(xiàng)來配置 velocity.js 動畫效果

注意：js-effect 依賴于 velocity.js。需要確保 velocity.js 已加載。

// 引入 lazyimg
import Lazyimg, { withLazyimg } from "react-lazyimg-component";
// 引入 volecity.js
import "velocity-animate";
import "velocity-animate/velocity.ui";
// 配置
const config = {
  placeholder: "loading.svg",
  js_effect: "transition.fadeIn", // 支持 velocity.js 動畫效果
};
const Lazy = withLazyimg(config);
// 調(diào)用
;

直接上效果了 ?

指定 css-effect 配置項(xiàng)來配置 animate.css 動畫效果

注意：css-effect 依賴于 animate.css。需要確保 animate.css 已安裝。

  // 配置
  const config = {
    js_effect="transition.flipXIn" // 不會生效
    css_effect={["animated", "rollIn"]} // 定制 css 動畫效果
  };
  const Lazy = withLazyimg(config);
  // 調(diào)用
  ;

直接上效果了 ?

指定 parent 配置項(xiàng)指定父級元素動畫效果

singsong: 為什么懶加載的動畫效果只作用于目標(biāo)元素，某些條件下作用于目標(biāo)元素的父級元素會有意想不到效果哦 ?。

  // 指定動畫效果作用于該父級元素