快捷導(dǎo)航

在Vue3中實(shí)現(xiàn)懶加載功能的代碼示例

更新時(shí)間：2024年09月22日 16:07:03 作者：JJCTO袁龍

在現(xiàn)代前端開發(fā)中,懶加載是一種提高應(yīng)用性能和用戶體驗(yàn)的重要技術(shù),尤其是在處理較大圖片或長列表數(shù)據(jù)時(shí),本文將使用 Vue 3 和其新推出的 setup 語法糖來實(shí)現(xiàn)懶加載功能,并提供具體的示例代碼,需要的朋友可以參考下

在 Vue 3 中實(shí)現(xiàn)懶加載功能

在現(xiàn)代前端開發(fā)中，懶加載是一種提高應(yīng)用性能和用戶體驗(yàn)的重要技術(shù)，尤其是在處理較大圖片或長列表數(shù)據(jù)時(shí)。懶加載意味著僅在用戶需要時(shí)才加載資源，這有助于減少初始加載時(shí)間和提升響應(yīng)速度。本文將使用 Vue 3 和其新推出的 setup 語法糖來實(shí)現(xiàn)懶加載功能，并提供具體的示例代碼，幫助大家更好的理解。

一、懶加載的原理

懶加載的基本原理是通過 JavaScript 監(jiān)測(cè)視口，一旦用戶滾動(dòng)到某個(gè)元素時(shí)才去加載該元素的內(nèi)容。例如，在一個(gè)包含大量圖片的頁面中，初始加載時(shí)只加載可見部分的圖片，用戶下滾時(shí)再加載其余圖片。

二、準(zhǔn)備工作

首先，我們需要?jiǎng)?chuàng)建一個(gè)新的 Vue 3 項(xiàng)目。如果你還沒有項(xiàng)目，可以使用以下命令通過 Vue CLI 創(chuàng)建一個(gè)新的項(xiàng)目：

npm install -g @vue/cli
vue create lazy-load-demo
cd lazy-load-demo
npm run serve

接下來，安裝 Intersection Observer，雖然這個(gè) API 是原生支持的，但為了更好地支持老舊瀏覽器，我們可以使用一個(gè) polyfill：

npm install intersection-observer

在你的 main.js 文件中引入此 polyfill：

import 'intersection-observer';

三、實(shí)現(xiàn)懶加載組件

我們將創(chuàng)建一個(gè)名為 LazyLoadImage.vue 的組件，利用 Intersection Observer 來實(shí)現(xiàn)懶加載。創(chuàng)建組件文件：

<template>
  <div ref="imageRef" class="lazy-load-image">
    <img
      v="isVisible"
      :src="src"
      :alt="alt"
      @load="onLoad"
      @error="onError"
    />
    <div v-else class="placeholder">Loading...</div>
  </div>
</template>

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

export default {
  props: {
    src: {
      type: String,
      required: true,
    },
    alt: {
      type: String,
      default: 'Image',
    },
  },
  setup(props) {
    const imageRef = ref(null);
    const isVisible = ref(false);
    let observer = null;

    const loadImage = (entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          isVisible.value = true; // Set the image to be visible
          observer.unobserve(entry.target); // Unobserve after loading
        }
      });
    };

    onMounted(() => {
      observer = new IntersectionObserver(loadImage);
      if (imageRef.value) {
        observer.observe(imageRef.value); // Observe the image element
      }
    });

    onBeforeUnmount(() => {
      if (observer && imageRef.value) {
        observer.unobserve(imageRef.value); // Clean up on unmount
      }
    });

    return {
      imageRef,
      isVisible,
    };
  },
};
</script>

<style scoped>
.lazy-load-image {
  width: 100%;
  height: auto;
  position: relative;
}

.placeholder {
  width: 100%;
  height: 200px; /* Specify a height for the placeholder */
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f0f0f0;
}
</style>

在這個(gè) LazyLoadImage 組件中，我們接受兩個(gè)參數(shù)：src 和 alt。組件的原理是通過 IntersectionObserver API 監(jiān)聽元素的可見性，當(dāng)圖片進(jìn)入視口時(shí)，我們就更新 isVisible 變量為 true，從而顯示圖片。如果不在視口，我們顯示一個(gè)加載的占位符。

四、使用懶加載組件

現(xiàn)在我們將使用 LazyLoadImage 組件來實(shí)現(xiàn)一個(gè)懶加載的圖片列表。

在你的 App.vue 文件中，添加如下代碼：

<template>
  <div class="image-list">
    <LazyLoadImage
      v-for="(image, index) in images"
      :key="index"
      :src="image.src"
      :alt="image.alt"
    />
  </div>
</template>

<script>
import LazyLoadImage from './components/LazyLoadImage.vue';

export default {
  components: {
    LazyLoadImage,
  },
  data() {
    return {
      images: [
        { src: 'https://placekitten.com/800/600', alt: 'Cat 1' },
        { src: 'https://placekitten.com/801/600', alt: 'Cat 2' },
        { src: 'https://placekitten.com/802/600', alt: 'Cat 3' },
        { src: 'https://placekitten.com/803/600', alt: 'Cat 4' },
        { src: 'https://placekitten.com/804/600', alt: 'Cat 5' },
        // 可以添加更多圖片
      ],
    };
  },
};
</script>

<style>
.image-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
</style>

在這個(gè)組件中，我們導(dǎo)入了 LazyLoadImage 并使用 v-for 來循環(huán)渲染多個(gè)圖片。每張圖片會(huì)在進(jìn)入視口時(shí)才會(huì)懶加載，減少了性能開銷。