https://github.com/func-star/mor-lazyload-img

Mona系列 - React图片懒加载
https://github.com/func-star/mor-lazyload-img

lazyload lazyload-images lazyload-img mona monajs

Last synced: 21 days ago
JSON representation

Mona系列 - React图片懒加载

• Host: GitHub
• URL: https://github.com/func-star/mor-lazyload-img
• Owner: func-star
• Created: 2018-08-24T09:16:39.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2018-08-28T11:59:49.000Z (almost 8 years ago)
• Last Synced: 2025-09-16T03:19:51.796Z (9 months ago)
• Topics: lazyload, lazyload-images, lazyload-img, mona, monajs
• Language: JavaScript
• Homepage: https://func-star.github.io/mor-lazyload-img/
• Size: 170 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Mona系列-React图片懒加载

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

[![npm](https://img.shields.io/npm/v/mor-lazyload-img.svg?style=flat-square)](https://www.npmjs.com/package/mor-lazyload-img) [![npm](https://img.shields.io/npm/dt/mor-lazyload-img.svg?style=flat-square)](https://www.npmjs.com/package/mor-lazyload-img)

[demo页面](https://func-star.github.io/mor-lazyload-img/)

## 依赖

- [mor-scroll-watcher](https://www.npmjs.com/package/mor-scroll-watcher)

## 代码演示

```js

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 (

			


				

			

		)

	}

}


```

## 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