Skip to content

likuner/LAZY-IMG

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

52 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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.
<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

<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 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:
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

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