Vue3图片懒加载（vue3-lazyload）

Vue2图片懒加载

参考文档：vue3-lazyload

效果如下图：vue3-lazyload@0.3.8

在线预览

安装

npm install vue3-lazyload
# or
yarn add vue3-lazyload
# or
pnpm add vue3-lazyload

引入并注册

import {
    createApp } from 'vue'
import VueLazyLoad from 'vue3-lazyload'
import Default from 'images/default.jpg'
import Error from 'images/error.jpg'
import App from './App.vue'

const app = createApp(App)
app.use(VueLazyLoad, {
   
  loading: Default, // 加载中占位图
  error: Error, // 加载失败占位图
  lifecycle: {
   
    loading: (el: Element) => {
   
      console.log('loading', el)
    },
    error: (el: Element) => {
   
      console.log('error', el)
    },
    loaded: (el: Element) => {
   
      console.log('loaded', el)
    }
  }
})
app.mount('#app')

使用

基本使用

<script lang=