Vue3图片懒加载（vue3-lazyload）

置顶 theMuseCatcher

已于 2025-07-16 11:37:24 修改

阅读量697

点赞数 6

CC 4.0 BY-SA版权

于 2024-11-01 10:00:59 首次发布

本文链接：https://blog.csdn.net/Dandrose/article/details/141353533

Vue3 同时被 2 个专栏收录

89 篇文章

订阅专栏

TypeScript

87 篇文章

订阅专栏

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="ts" setup>
import { ref } from 'vue'
const Image1 = ref('https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.0.5/5.jpg')
</script>
<template>
  <div class="m-image">
    <img class="u-image" v-lazy="Image1" />
  </div>
</template>
<style lang="less" scoped>
.m-image {
  width: 200px;
  height: 200px;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  .u-image {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    &[lazy=loading] {
      object-fit: cover;
    }
    &[lazy=loaded] {
      object-fit: contain;
    }
  }
}
</style>

自定义配置

<script setup lang="ts">
import { ref } from 'vue'
import { Space, Button } from 'vue-amazing-ui'
import 'vue-amazing-ui/css'
const Image1 = 'https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.0.5/5.jpg'
const Image2 = 'https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.0.5/8.jpg'
const Image3 = 'https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.0.5/9.jpg'
const lazyOptions = ref({
  src: Image1,
  // loading: Image2,
  // error: Image2,
  lifecycle: {
    loading: (el: Element) => {
      console.log('image loading', el)
    },
    error: (el: Element) => {
      console.log('image error', el)
    },
    loaded: (el: Element) => {
      console.log('image loaded', el)
    }
  }
})
function onClick () {
  lazyOptions.value.src = Image3
}
</script>
<template>
  <Space align="center" :size="30">
    <div class="m-image">
      <img class="u-image" v-lazy="{...lazyOptions}" />
    </div>
    <Button type="primary" @click="onClick">Change Image</Button>
  </Space>
</template>
<style lang="less" scoped>
.m-image {
  width: 200px;
  height: 200px;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  .u-image {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    &[lazy=loading] {
      object-fit: cover;
    }
    &[lazy=loaded] {
      object-fit: contain;
    }
  }
}
</style>

延迟加载

<script lang="ts" setup>
import { ref } from 'vue'
import { Space, Button } from 'vue-amazing-ui'
import 'vue-amazing-ui/css'
const Image1 = 'https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.0.5/5.jpg'
const Image2 = 'https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.0.5/8.jpg'
const Image3 = 'https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.0.5/9.jpg'
const lazyOptions = ref({
  src: Image1,
  // loading: Image2,
  // error: Image2,
  lifecycle: {
    loading: (el: Element) => {
      console.log('image loading', el)
    },
    error: (el: Element) => {
      console.log('image error', el)
    },
    loaded: (el: Element) => {
      console.log('image loaded', el)
    }
  }
})
function onClick () {
  lazyOptions.value.src = Image3
}
</script>
<template>
  <Space align="center" :size="30">
    <div class="m-image">
      <img class="u-image" v-lazy="{...lazyOptions, delay: 1000}" />
    </div>
    <Button type="primary" @click="onClick">Change Image</Button>
  </Space>
</template>
<style lang="less" scoped>
.m-image {
  width: 200px;
  height: 200px;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  .u-image {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    &[lazy=loading] {
      object-fit: cover;
    }
    &[lazy=loaded] {
      object-fit: contain;
    }
  }
}
</style>