Skip to content

func-star/mor-lazyload-img

Repository files navigation

Mona系列-React图片懒加载

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

npm npm

demo页面

依赖

代码演示

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