rc-lazy-image

图片懒加载组件，提供异步加载等相关功能。

Usage

import React from 'react';
import ReactDOM from 'react-dom';
import Image from '@gem-mine/rc-lazy-image';
ReactDOM.render(<Image src='xxx.jpg' />, container);

基本用法

import Image from '@gem-mine/rc-lazy-image'

const props = {
  width: 200,
  height: 200,
}

class App extends React.Component {
  
  render() {
    return (
      <div>
        <Image {...props}
          src='//gcdncs.101.com/v0.1/static/fish/script/swfupload/a801236bjw1ez812gy3g8j20rs0rs0z5.jpg' />
        <Image {...props}
          src='//gcdncs.101.com/err.jpg' />
      </div>
    );
  }
}

ReactDOM.render(<App />, mountNode);

事件

import Image from '@gem-mine/rc-lazy-image'

const props = {
  threshold: 500,
  appear: () => {
    console.log('threshold trigger')    
  }
};

ReactDOM.render(
  <div>
    <Image
      {...props}
      src={'//gcdncs.101.com/v0.1/static/fish/script/swfupload/a801236bjw1ez812gy3g8j20rs0rs0z5.jpg'}
    />
  </div>,
  mountNode,
);

API

| 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | threshold | 指定距离底部多少距离时触发加载 | Number | 0 | | event | 指定触发事件，默认为'scroll' | String | scroll | | container | 指定容器，默认为window | React.Node | window | | parent | 可以指定动画效果作用于元素的哪个父级元素 | String | Number | - | | appear | 元素出现在可视窗口时触发appear钩子函数 | Function | null | | load | 元素图片的加载完后触发load钩子函数 | Function | null | | error | 图片加载出错时触发error钩子函数 | Function | null | | node_type | 指定生成的节点类型，默认为'img' | String | img | | placeholder | 占位元素，除了支持普通的图片外，还支持react组件 | String | React.Node | 默认占位图 |

fork from react-lazyimg-component