lazy-img
- a custom element of lazy-load-image based on web-components.
- it can be used in both
vue&reactprojects. - it can also be used in native
html.
- you can get
lazy-imgthrough CDN. - you can add
@+versionafter/lazy-imgif you need to load the specified version.
<script src="https://unpkg.com/@likun./lazy-img/dist/index.js"></script>npm install @likun./lazy-img
yarn add @likun./lazy-img
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>lazy-img</title>
<script src="https://unpkg.com/@likun./lazy-img/dist/index.js"></script>
</head>
<body>
<lazy-img src="image.png" width="500" height="300" alt="lazy image" />
</body>
</html>import '@likun./lazy-img'
- learn more: Vue and Web Components and 🇨🇳中文.
<lazy-img
:src="imgSrc"
width="50%"
height="200px"
@lazyload="handleLoad"
@lazyerror="handleError"
/>- learn more: Using Web Components in React and 🇨🇳中文.
- className will be resolved to classname, but you can use
classdirectly. - 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:
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 (
<lazy-img
ref={lazyRef}
src={imgSrc}
width="300px"
height="200px"
// class can be used here
class={styles.lazyImage}
/>
)
}
export default LazyDemo| 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 |
| Name | Explanation | Callback arguments |
|---|---|---|
| lazyload | triggered when image is loaded successfully | event |
| lazyerror | triggered when image loading failed | event |