0.4.1 • Published 6 years ago

mor-lazyload-img v0.4.1

Weekly downloads
1
License
ISC
Repository
github
Last release
6 years ago

Mona系列 - React图片懒加载

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

npm npm

点我看一下效果

依赖

代码演示

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滚动距离底部的触发距离Number0no

WatcherItem

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

联系我

微信:599321378

0.4.1

6 years ago

0.4.0

6 years ago

0.3.0

6 years ago

0.2.0

6 years ago

0.1.0

6 years ago