- Notifications
You must be signed in to change notification settings - Fork0
a custom element of lazy-load-image based on web-components
NotificationsYou must be signed in to change notification settings
likuner/LAZY-IMG
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
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.
<scriptsrc="https://unpkg.com/@likun./lazy-img/dist/index.js"></script>
npm install @likun./lazy-imgyarn add @likun./lazy-img<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>lazy-img</title><scriptsrc="https://unpkg.com/@likun./lazy-img/dist/index.js"></script></head><body><lazy-imgsrc="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 toclassname, 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'importstylesfrom'./LazyDemo.module.less'functionLazyDemo(){constlazyRef=useRef()const[imgSrc]=useState('image.png')useEffect(()=>{consthandleLoad=()=>{}consthandleError=(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-imgref={lazyRef}src={imgSrc}width="300px"height="200px"// class can be used hereclass={styles.lazyImage}/>)}exportdefaultLazyDemo
| 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 |
About
a custom element of lazy-load-image based on web-components
Topics
Resources
Stars
Watchers
Forks
Packages0
No packages published