vue3-lazyload-img

vue3-lazyload-img

vue3 图片懒加载

如果你只需要一个简单的图片懒加载组件，那么这个组件应该可以满足你的需求。
占用空间小，已封装好预载、失败两种状态对应的显示，引入使用即可。

install

  yarn add vue3-lazyload-img
  npm i vue3-lazyload-img

example

Vue:

<template>
  <div>
   <LazyloadImg src="https://v3.cn.vuejs.org/logo.png" class="logo" title="This is the title"/>
  </div>
</template>

tsx:

import { LazyloadImg } from "vue3-lazyload-img"

export default () => {
  return (
    <div class="layout-root">
      <LazyloadImg src={'https://v3.cn.vuejs.org/logo.png'} class="logo" title={"This is the title"}/>
    </div>
  )
}

main.ts

import {createApp} from 'vue'
import App from './App.vue'
import lazyloadImgInit, { LazyloadImg } from "vue3-lazyload-img"
const app = createApp(App)

//全局引入
app.use(lazyloadImgInit)

app.mount('#app')

API

如果需要自定义某一张图片预载、失败显示。请参考下面api

示例： import ErrComponent from "./ErrComponent.vue"
      <lazyload-img  preSrc='https://pre.jpg' :errSrc="ErrComponent" src='https://v3.cn.vuejs.org/logo.png' />

LazyloadImg

如果需要全局设置，请参考下面api。

示例： 
      app.use(lazyloadImgInit,{
           //支持图片url、jsx、vue模板(非必填，有默认样式)
            preImg: ...,
            //支持图片url、jsx、vue模板(非必填，有默认样式)
            errImg: ...,
            //重试次数(非必填，默认5次)
            retryLoad: ...
      })

lazyloadImgConfig