Vue进阶——懒加载v-lazy

一、 什么是懒加载？

图片懒加载是一种网页性能优化技术，它允许在页面加载时仅加载可见区域内的图像，从而减少初始页面加载时间和网络带宽使用。这意味着图像只会在用户滚动或浏览到它们时才会被加载，而不是在页面一开始就全部加载。

二、vue和懒加载

Vue.js通常不提供直接的图像懒加载功能，但可以使用一些库和插件来实现图像懒加载。其中，vue-lazyload 是一个常用的Vue.js插件，可以实现懒加载

1. vue2

1.1 安装 vue-lazyload 插件：

npm install vue-lazyload --save

1.2 导入和使用 vue-lazyload 插件：

import Vue from 'vue'
import VueLazyload from 'vue-lazyload'

Vue.use(VueLazyload)

1.3 在需要懒加载的图片元素中，使用 v-lazy 指令：

<template>
  <div>
    <img v-lazy="ImgUrl" alt="Lazy Loaded Image">
  </div>
</template>

2. vue3

2.1 安装 vue-lazyload 插件：

npm install vue-lazyload --save

2.2 导入和使用

使用 Composition API 来管理组件的状态。首先，导入 ref 和 onMounted 函数：

import { ref, onMounted } from 'vue'

创建一个 ref 变量，用于存储图像的URL，并在函数或钩子（此案例中使用onMounted）中设置它：

export default {
  setup() {
    const ImgUrl = ref("URL_TO_YOUR_IMAGE")

    onMounted(() => {
      // 这里可以触发加载图像的逻辑，如果需要
      ImgUrl.value = "qiushuyiye.png"
    })

    return {
      ImgUrl
    }
  }
}

应小伙伴要求，添加setup语法糖代码示例

vue3进阶——setup

<script setup>
const ImgUrl = ref("URL_TO_YOUR_IMAGE")

onMounted(() => {
	// 这里可以触发加载图像的逻辑，如果需要
    ImgUrl.value = "qiushuyiye.png"
})
</script>

在模板中，使用 v-lazy 指令来懒加载图像：

<template>
  <div>
    <img v-lazy="ImgUrl" alt="Lazy Loaded Image">
  </div>
</template>