# lazy_load_react_images

> dynamic expose for Web. mobile, lazy load, load more

Latest version **1.4.0** (published 2022-10-09) · ISC license · 0 weekly downloads

## Install

```sh
npm install lazy_load_react_images
pnpm add lazy_load_react_images
yarn add lazy_load_react_images
bun add lazy_load_react_images
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.4.0 |
| Published | 2022-10-09 |
| First published | 2022-10-08 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 12.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | shiningding |
| Maintainers | shiningding |

## Links

- npm: https://www.npmjs.com/package/lazy_load_react_images
- Repository: https://github.com/dxdnsicon/lazy-load-react
- Homepage: https://github.com/dxdnsicon/lazy-load-react#readme
- Issues: https://github.com/dxdnsicon/lazy-load-react/issues
- npm.io page: https://npm.io/package/lazy_load_react_images

## Dependencies (1)

- [dync_expose](https://npm.io/package/dync_expose.md) 0.0.3

## Recent versions

- 1.4.0 (latest) — 2022-10-09
- 1.3.0 — 2022-10-09
- 1.2.0 — 2022-10-09
- 1.1.0 — 2022-10-09
- 0.0.1 — 2022-10-08

## README

# dynamic expose module for react:
支持图片懒加载，DOM元素曝光可视区，长列表滚动加载更多，三种场景。
基于window.IntersectionObserver 实现，摒弃scroll的方式，理论上性能会好一些。不用绑定很多的滚动监听，在不支持的环境里会降级成scroll，使用者不用担心兼容性问题
### lazy load example:
```
import Expose from 'lazy_load_react_images/es/Expose';

// images lazy load;
<Expose
  id={`songListimg_${index}`}
  className="mui_cell_list__img"
  src={'http://xxxx'}
/>
```
### dom dynamic expose:
```
import Expose from 'lazy_load_react_images/es/Expose';
// dom dynamic expose
<Expose
  id={'experienceofficer_lottery'}
  cb={() => {
    // expose callback
  }}
>
  <>
    <span>expose element</span>
  </>
</Expose>
```

### long list load more, scroll;
```
import LoadMore from 'lazy_load_react_images/es/LoadMore';

<LoadMore
  id="present_tab"
  loadText="loading..."
  overText={`${empty ? 'empty goods' : 'over'}`}
  isOver={isLogin === 'no' || hasMore === 0}
  loadMoreHandler={() => {
    // loadmore callback, you can query your next page list data;
    fetchMainData({ nextPos }).then(({ nextPos, normalList, hasMore }) => {
      // setState to make children change;
    });
  }}
>
  <ul className="mui_cell_list mod_other_gift">
    {presentList?.map(item => {
      const { id, name, pic, subTitle } = item;
      return (
        <li key={`${name}_${id}`} className="mui_cell_list__item">
          <div className="mui_cell_list__box">
            <div className="mui_cell_list__media">
              <img className="mui_cell_list__img" src={Music.fixUrl(pic)} alt={name} />
            </div>
            <div className="mui_cell_list__bd">
              <h3 className="mui_cell_list__tit c_txt1">{name}</h3>
              <p className="mui_cell_list__desc c_txt2">{subTitle}</p>
            </div>
            <UseButton presentInfo={item} />
          </div>
        </li>
      );
    })}
  </ul>
</LoadMore>
```

---
_Source: https://npm.io/package/lazy_load_react_images · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._