rc-lazy-image

---

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

Usage

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

基本用法

1import Image from '@gem-mine/rc-lazy-image'
2
3const props = {
4  width: 200,
5  height: 200,
6}
7
8class App extends React.Component {
9  
10  render() {
11    return (
12      <div>
13        <Image {...props}
14          src='//gcdncs.101.com/v0.1/static/fish/script/swfupload/a801236bjw1ez812gy3g8j20rs0rs0z5.jpg' />
15        <Image {...props}
16          src='//gcdncs.101.com/err.jpg' />
17      </div>
18    );
19  }
20}
21
22ReactDOM.render(<App />, mountNode);

事件

1import Image from '@gem-mine/rc-lazy-image'
2
3const props = {
4  threshold: 500,
5  appear: () => {
6    console.log('threshold trigger')    
7  }
8};
9
10ReactDOM.render(
11  <div>
12    <Image
13      {...props}
14      src={'//gcdncs.101.com/v0.1/static/fish/script/swfupload/a801236bjw1ez812gy3g8j20rs0rs0z5.jpg'}
15    />
16  </div>,
17  mountNode,
18);
19

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