快捷導(dǎo)航

Vue實現(xiàn)圖片懶加載的多種方法詳解

更新時間：2023年08月28日 08:27:01 作者：俠名風(fēng)

圖片懶加載是前端開發(fā)中一項重要的性能優(yōu)化策略,它能夠明顯縮短頁面加載時間,提升用戶的瀏覽體驗,在本文中,我們將深入探討在Vue開發(fā)時候如何實現(xiàn)圖片懶加載,同時探討多種實現(xiàn)途徑,需要的朋友可以參考下

為什么需要圖片懶加載？

首先，讓我們回顧一下為什么需要圖片懶加載。在沒有圖片懶加載的情況下，頁面加載時會同時請求所有圖片，這可能導(dǎo)致以下問題：

延遲頁面加載時間： 如果頁面包含大量的圖片，所有這些圖片都在頁面加載時同時請求，會導(dǎo)致頁面加載時間顯著增加，用戶需要等待更長的時間才能看到內(nèi)容。
浪費帶寬： 加載不在可視區(qū)域的圖片是一種帶寬浪費。用戶可能永遠(yuǎn)不會看到這些圖片，但它們?nèi)匀粫幌螺d，這浪費了用戶的帶寬和服務(wù)器資源。
降低用戶體驗： 頁面加載時間過長會降低用戶的體驗。用戶希望立即看到內(nèi)容，而不是等待圖片加載完成。

圖片懶加載的核心思想是只有當(dāng)圖片出現(xiàn)在用戶可視區(qū)域時才加載它們，從而解決了上述問題。

使用 Vue.js 實現(xiàn)圖片懶加載

現(xiàn)在，讓我們一起來探討多種使用 Vue.js 實現(xiàn)圖片懶加載的方法。

方法 1: 自定義指令

我們首先介紹的方法是使用自定義指令。自定義指令允許我們將懶加載邏輯封裝成可重用的指令，然后在需要懶加載的圖片元素上使用這個指令。

<template>
  <div>
    <img v-for="(image, index) in images" :src="image" v-lazyload />
  </div>
</template>
<script>
export default {
  data() {
    return {
      images: [
        'image1.jpg',
        'image2.jpg',
        'image3.jpg',
        // 添加更多圖片鏈接
      ],
    };
  },
};
</script>

在上述代碼中，我們?yōu)槊繌垐D片元素添加了 v-lazyload 指令。接下來，我們需要創(chuàng)建這個自定義指令并添加懶加載的邏輯。

<script>
export default {
  directives: {
    lazyload: {
      inserted(el) {
        // 添加懶加載邏輯
      },
    },
  },
};
</script>

在 inserted 鉤子中，我們可以使用 Intersection Observer API 監(jiān)測圖片是否進(jìn)入了可視區(qū)域，一旦圖片進(jìn)入可視區(qū)域，我們可以加載它。

這是一個基本的自定義指令的骨架，你可以根據(jù)項目需求進(jìn)一步定制懶加載邏輯。

方法 2: 使用第三方庫

Vue.js 生態(tài)系統(tǒng)中有一些強(qiáng)大的第三方庫，可以幫助你快速實現(xiàn)圖片懶加載。其中之一是 vue-lazyload。

首先，安裝 vue-lazyload：

npm install vue-lazyload

然后，在你的 Vue.js 應(yīng)用中引入它并配置：

<script>
import VueLazyload from 'vue-lazyload';
export default {
  directives: {
    lazyload: VueLazyload, // 使用vue-lazyload指令
  },
};
</script>

現(xiàn)在，你可以在模板中使用 v-lazy 指令來實現(xiàn)圖片懶加載：

<template>
  <div>
    <img v-for="(image, index) in images" :src="image" v-lazy="image" />
  </div>
</template>

vue-lazyload 提供了豐富的配置選項，包括預(yù)加載、錯誤占位符、加載占位符等等，你可以根據(jù)項目需求進(jìn)行自定義。

方法 3: 基于滾動事件的懶加載

在某些情況下，你可能不想使用第三方庫，而是傾向于編寫自己的圖片懶加載邏輯。這可以通過基于滾動事件來實現(xiàn)。

首先，在你的 Vue 組件中，為圖片元素綁定監(jiān)聽滾動事件的方法：

<template>
  <div>
    <img v-for="(image, index) in images" :src="image" ref="lazyImages" @load="onImageLoad(index)" />
  </div>
</template>

在 @load 事件中，我們觸發(fā)了一個方法 onImageLoad(index)。

然后，在組件的 methods 部分實現(xiàn) onImageLoad 方法來檢測圖片是否進(jìn)入可視區(qū)域：

<script>
export default {
  methods: {
    onImageLoad(index) {
      const lazyImages = this.$refs.lazyImages;
      const img = lazyImages[index];
      const rect = img.getBoundingClientRect();
      if (rect.top < window.innerHeight && rect.bottom >= 0 && !img.src) {
        img.src = img.dataset.src;
      }
    },
  },
};
</script>

這段代碼檢查每個圖片元素是否進(jìn)入可視區(qū)域，并且僅在圖片未加載時才設(shè)置 src 屬性。確保在圖片元素上設(shè)置了 data-src 屬性。

這是一種基本的滾動事件懶加載方法，你可以根據(jù)需要進(jìn)一步優(yōu)化和擴(kuò)展。

方法 4: 使用移動端的 lazyload 屬性

在移動端開發(fā)中，瀏覽器通常支

持 lazyload 屬性，這是一個原生的懶加載屬性。你只需在 img 標(biāo)簽上添加 loading="lazy" 屬性，瀏覽器會自動處理圖片的懶加載。

<template>
  <div>
    <img v-for="(image, index) in images" :src="image" loading="lazy" />
  </div>
</template>

這種方法非常簡單，適用于移動端應(yīng)用開發(fā)，因為它充分利用了瀏覽器的原生支持。

方法 5: 使用懶加載的 CSS 類

在某些情況下，你可以使用 CSS 類來實現(xiàn)圖片懶加載。首先，為所有的圖片元素添加一個自定義的 CSS 類，例如 lazy-load。

<template>
  <div>
    <img v-for="(image, index) in images" :src="image" class="lazy-load" />
  </div>
</template>

然后，使用 JavaScript 來檢測滾動事件，當(dāng)圖片進(jìn)入可視區(qū)域時，將圖片元素的 src 屬性設(shè)置為圖片的實際 URL。

<script>
export default {
  mounted() {
    const lazyImages = document.querySelectorAll('.lazy-load');
    function lazyLoad() {
      lazyImages.forEach(img => {
        const rect = img.getBoundingClientRect();
        if (rect.top < window.innerHeight && rect.bottom >= 0 && !img.src) {
          img.src = img.dataset.src;
        }
      });
    }
    window.addEventListener('scroll', lazyLoad);
  },
};
</script>

這種方法適用于一些簡單的項目，但不如 Intersection Observer 那么高效和可維護(hù)。