r-img-lazyload

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