lazy-img
- a custom element of lazy-image-loading based on web-components.
- it can be used in both
vue
&react
projects. - it can also be used in native
html
.
- you can get
lazy-img
through CDN. - you can add
@+version
after/lazy-img
if 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'
<lazy-img
:src="imgSrc"
width="50%"
height="200px"
@lazyload="handleLoad"
@lazyerror="handleError"
/>
- className is not valid in lazy-img, may be the reason there is "-" in the name. However, the name of the custom element of web-components must contain "-".
- event listeners that need special handling of lazyload & lazyerror in react,the following example:
import { useState, useRef, useEffect } from 'react'
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"
/>
)
}
export default LazyDemo
- attribute
width
&height
can be string, number, and percentage. - attribute
alt
defines an alternate text description of the image. - event
lazyload
is triggered when image is loaded successfully. - event
lazyerror
is triggered when image loading failed.