https://github.com/likuner/lazy-img
a custom element of lazy-load-image based on web-components
https://github.com/likuner/lazy-img
custom-element lazy-img lazy-loading shadow-dom typescript web-components
Last synced: about 1 month ago
JSON representation
a custom element of lazy-load-image based on web-components
- Host: GitHub
- URL: https://github.com/likuner/lazy-img
- Owner: likuner
- Created: 2022-03-29T14:31:29.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2022-07-10T09:23:49.000Z (almost 4 years ago)
- Last Synced: 2025-03-13T15:16:34.865Z (over 1 year ago)
- Topics: custom-element, lazy-img, lazy-loading, shadow-dom, typescript, web-components
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/@likun./lazy-img
- Size: 592 KB
- Stars: 1
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Introduction
`lazy-img`
- a custom element of lazy-load-image based on web-components.
- it can be used in both `vue` & `react` projects.
- it can also be used in native `html`.
# Installing π
## CDN
- you can get `lazy-img` through CDN.
- you can add `@+version` after `/lazy-img` if you need to load the specified version.
```html
```
## npm
```
npm install @likun./lazy-img
```
## yarn
```
yarn add @likun./lazy-img
```
# Usage
## Use in HTML
```html
lazy-img
```
## Use in Vue and React
### Importing package
```
import '@likun./lazy-img'
```
### Use in Vue
- learn more: [Vue and Web Components](https://vuejs.org/guide/extras/web-components.html) and [π¨π³δΈζ](https://v3.cn.vuejs.org/guide/web-components.html).
```vue
```
### Use in React
- learn more: [Using Web Components in React](https://reactjs.org/docs/web-components.html) and [π¨π³δΈζ](https://zh-hans.reactjs.org/docs/web-components.html).
- **className** will be resolved to **classname**, but you can use `class` directly.
- events triggered by web components may not be delivered correctly through the react rendering tree, you need to manually add event handlers in the react component to handle these events, the following example:
```jsx
import { useState, useRef, useEffect } from 'react'
import styles from './LazyDemo.module.less'
function LazyDemo() {
const lazyRef = useRef()
const [imgSrc] = useState('image.png')
useEffect(() => {
const handleLoad = () => {}
const handleError = (e) => {
// e.target.setAttribute('src', 'image1.png')
}
lazyRef.current.addEventListener('lazyload', handleLoad)
lazyRef.current.addEventListener('lazyerror', handleError)
return () => {
lazyRef.current.removeEventListener('lazyload', handleLoad)
lazyRef.current.removeEventListener('lazyerror', handleError)
}
}, [])
return (
)
}
export default LazyDemo
```
## Attributes
| **Parameter** | **Explanation** | **Type** | **Defalut value** |
| --- | --- | --- | --- |
| src | url of image | string | |
| presrc | url of space occupying image when lazy | string | |
| width | width of image | number | string | percentage | 300px |
| height | height of image | number | string | percentage | 200px |
| alt | alternate text description of the image when failed | string | |
## Events
| **Name** | **Explanation** | **Callback arguments** |
| --- | --- | --- |
| lazyload | triggered when image is loaded successfully | event |
| lazyerror | triggered when image loading failed | event |