Introduction
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.
Installing 🛠
CDN
- 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
npm install @likun./lazy-img
yarn
yarn add @likun./lazy-img
Usage
Use in HTML
<!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>Use in Vue and React
Importing package
import '@likun./lazy-img'
Use in Vue
- learn more: Vue and Web Components and
🇨🇳 中文.
<lazy-img
:src="imgSrc"
width="50%"
height="200px"
@lazyload="handleLoad"
@lazyerror="handleError"
/>Use in React
- 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 LazyDemoAttributes
| 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 |