Mona系列 - React图片懒加载

✨✨ 这是一款非常有用轻巧的 React 组件，你可以应用到任何需要滚动监听的场景

点我看一下效果

依赖

• mor-scroll-watcher

代码演示

import React, { Component } from 'react'
import { findDOMNode } from 'react-dom'
import LazyloadImg from 'lazyload-img'

const LazyloadImgItem = LazyloadImg.item

export default class Demo extends Component {
	componentDidMount () {
		LazyloadImg.init({
			wrap: findDOMNode(this.refs.wrap)
			// bottomEmit: -100,
		})
	}

	render () {
		return (
			<div className="wrap o-a full" ref="wrap">
				<LazyloadImgItem
					className="a"
					wrapClassName="b"
					src="images/min_10x10.jpg"
					actualscr="images/min_500x500.jpg" />
			</div>
		)
	}
}

options

| 参数 | 说明 | 类型 | 默认值 | 是否必传 | | --- | --- | --- | --- | :-- | | wrap | 滚动容器 | DOM原生节点 | - | yes | | bottomEmit | 滚动距离底部的触发距离 | Number | 0 | no |

WatcherItem

| 参数 | 说明 | 类型 | 默认值 | 可选项 | | --- | --- | --- | --- | :-- | | src | 替代图，体积很小的压缩图 | String | - | - | | actualscr | 真实要显示的图片 | String | - | - | | className | 绑定在img上的className属性 | String | - | - | | wrapClassName | 绑定在img父级容器上的className属性 | String | - | - | | wrapStyle | 绑定在img父级容器上的style属性 | String | - | - | | style | 绑定在img上的style属性 | String | - | - |

联系我

微信：599321378