https://github.com/feeden/lazy-load-img-component
An simple image lazy loading component based on react hooks and IntersectionObserver;
https://github.com/feeden/lazy-load-img-component
intersection-observer lazy-load-img lazyload-images react react-hooks typescript
Last synced: 6 months ago
JSON representation
An simple image lazy loading component based on react hooks and IntersectionObserver;
- Host: GitHub
- URL: https://github.com/feeden/lazy-load-img-component
- Owner: feEden
- License: mit
- Created: 2020-09-03T03:18:59.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2020-09-07T09:37:15.000Z (over 5 years ago)
- Last Synced: 2025-09-04T21:43:27.905Z (7 months ago)
- Topics: intersection-observer, lazy-load-img, lazyload-images, react, react-hooks, typescript
- Language: JavaScript
- Homepage:
- Size: 571 KB
- Stars: 2
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# lazy-load-img-component
An simple image lazy load component based on react hooks and IntersectionObserver;
## Install
```
npm install lazy-load-img-component
```
## Supports Props
```
// loading图片 可选
loadingImg?: string;
// 图片加载失败展示图片
errorImg?: string;
// 图片链接
src: string;
// 承载图片容器样式
style?: CSSProperties;
// img 标签上的所有属性 排除src
imgOptions?: Omit, 'src'>;
// IntersectionObserver支持的属性
options?: IntersectionObserver;
```
## Basic Usage
```
,
```