react-img-lazyload

React module for lazy-loading images in your react.js applications. Some of goals of this project worth noting include:

• 中文文档
• Based on vue-lazyLoad rewriting
• Be lightweight, powerful and easy to use
• Work on any image type
• Add loading class while image is loading
• Applicable to any style of layout
• Supports both of React

Installation

npm

$ npm install r-img-lazyload

Usage

use component work

import React, { Component } from 'react';
import Lazyload from 'r-img-lazyload';

export default class extends Component {
    constructor(props) {
        super(props);
    }
    render() {
        const config = {
            options: {
                error: 'errorPic',
                loading: 'loadingPic'
            },
            src: ''
        };
        return <Lazyload {...config} />;
    }
}

use raw HTML work

    <Lazyload src="http://xxxx.com/pic.png" tag="div" />

recommend Package component to use

// Lazy.jsx
import React, { Component } from 'react';
import Lazyload from 'r-img-lazyload';

const pic = require('xxxx/assets/img/defalut_pic.png');

export default class extends Component {
    constructor(props) {
        super(props);
    }
    render() {
        const config = {
            options: {
                error: pic,
                loading: pic
            },
            ...this.props
        };
        return <Lazyload {...config} />;
    }
}
// HomePage.jsx
import React, { Component } from 'react';
import Lazy form 'xxx/Lazy.jsx';

function HomePage() {
    return <lazy className="pic" src="xxxx.png" onClick="// todo..."/>
}

Constructor Options

| key | description | default | options | | :-: | :-: | :-: | :-: | | src | Picture address | ‘’ | String | | tag | Background image using the label | ‘’ | String | | options | Other configuration | {} | Other configuration |

Other configuration

| key | description | default | options | | :-: | :-: | :-: | :-: | | error | src of the image upon load fail | ‘’ | String | | loading | src of the image while loading | ‘’ | String | | listenEvents | events that you want React listen for | ['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend', 'touchmove'] | Object | | throttleWait | throttle wait | 200 |Number|

Desired Listen Events

You can configure which events you want v-img-lazyload by passing in an array of listener names.

import React, { Component } from 'react';
import Lazyload from 'r-img-lazyload';

export default class extends Component {
    constructor(props) {
        super(props);
    }
    render() {
        const config = {
            options: {
                error: 'errorPic',
                loading: 'loadingPic',
                // the default is ['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend']
                listenEvents: [ 'scroll' ]
            },
            src: ''
        };
        return <Lazyload {...config} />;
    }
}

CSS state

here are three states while img loading loading、loaded 、error

<img src="imgUrl" lazy="loading">
<img src="imgUrl" lazy="loaded">
<img src="imgUrl" lazy="error">

<style>
  img[lazy=loading] {
    /*your style here*/
  }
  img[lazy=error] {
    /*your style here*/
  }
  img[lazy=loaded] {
    /*your style here*/
  }
  /*
  or background-image
  */
  .yourclass[lazy=loading] {
    /*your style here*/
  }
  .yourclass[lazy=error] {
    /*your style here*/
  }
  .yourclass[lazy=loaded] {
    /*your style here*/
  }
</style>

Todo

• [ ] observer
• [ ] life cycle

License

The MIT License