Skip to content

React module for lazy-loading images in your react.js applications.

License

Notifications You must be signed in to change notification settings

DrawAChicken/r-img-lazyload

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

11 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

react-img-lazyload

npm version npm downloads npm license

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 loadingloadederror

<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

About

React module for lazy-loading images in your react.js applications.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published