@gem-mine/rc-lazy-image v0.1.1

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

fork from react-lazyimg-component