一文读懂：如何利用Vue3构建图片懒加载组件

2023-12-16 21:27:35

Vue3 实现图片懒加载：优化性能，提升用户体验

在现代前端开发中，图片懒加载技术已成为性能优化不可或缺的一部分。通过延迟加载非立即所需的图片，我们能够显著减少页面加载时间，为用户提供流畅的浏览体验。作为一款备受欢迎的前端框架，Vue3 为构建图片懒加载组件提供了丰富的支持。本文将深入探讨 Vue3 中图片懒加载的实现原理，指导你自定义自己的图片懒加载组件，并解答常见问题。

图片懒加载原理

图片懒加载背后的原理很简单：仅在图片进入用户可视区域时才加载它。这可以通过监听滚动事件或使用 Intersection Observer API 来实现。当图片进入可视区域时，触发一个加载事件，将图片的 src 属性设置为真实图片地址，完成图片加载。

使用 Vue3 构建图片懒加载组件

Vue3 提供了两种方法来构建图片懒加载组件：

原生 JavaScript 实现： 此方法需要手动监听滚动事件或使用 Intersection Observer API，并在图片进入可视区域时触发加载事件。
Vue3 v-lazy 指令： 该指令简化了图片懒加载的实现，自动在图片进入可视区域时加载图片。

v-lazy 指令用法：

<img v-lazy="imageSrc" />

其中，imageSrc 是图片的真实地址。v-lazy 指令会自动在图片进入可视区域时加载图片。

自定义图片懒加载组件

自定义图片懒加载组件可以提供更大的灵活性，满足特定需求。例如，我们可以支持多种图片格式、使用占位图、设置延迟加载优先级，以及自定义加载失败的处理方式。

自定义图片懒加载组件示例：

<template>
  <img :src="placeholder" v-lazy="imageSrc" />
</template>

<script>
import { ref, onMounted } from 'vue'

export default {
  props: {
    imageSrc: {
      type: String,
      required: true
    },
    placeholder: {
      type: String,
      default: ''
    }
  },
  setup(props) {
    const isLoaded = ref(false)

    const loadImg = () => {
      isLoaded.value = true
    }

    onMounted(() => {
      const observer = new IntersectionObserver(entries => {
        entries.forEach(entry => {
          if (entry.isIntersecting) {
            loadImg()
            observer.unobserve(entry.target)
          }
        })
      })
      observer.observe(this.$el)
    })

    return {
      isLoaded
    }
  }
}
</script>