如何使用 Vue 實作圖片懶載入及佔位圖？-Vue.js-PHP中文網

如何使用 Vue 實作圖片懶載入及佔位圖？

王林

發布： 2023-06-25 09:00:15

原創

1326 人瀏覽過

在網站中，圖片的使用十分常見，而如何優化圖片的載入已經成為了開發者們關注的重點之一。其中一個重要的優化是圖片懶加載，即在用戶滾動網頁時才加載可見區域的圖片，而在未滾動到的區域則不加載，從而減輕頁面的加載壓力，提高用戶體驗。

在使用 Vue 框架時，利用它所提供的指令，可以很方便地實作圖片懶載入及佔位圖。

對於圖片懶載入的實現，我們可以使用 Vue-lazyload 這個函式庫。首先，需要使用npm 安裝程式庫：

npm i vue-lazyload -S

登入後複製

在Vue 的入口檔案main.js 中引入該函式庫，並進行設定：

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

Vue.use(VueLazyload, {
  preLoad: 1.3, // 预加载的宽高比，默认为 1，即 PhotoShop 中的 1:1
  error: 'path/to/error.png', // 当加载图片失败时的占位图
  loading: 'path/to/loading.gif', // 加载中时的占位图
  attempt: 1 // 图片加载的尝试次数
})

登入後複製

其中，preLoad 是指定預先載入的寬高比，例如如果你設定成1.3，那麼圖片預先載入時，寬度會是目標寬度的1.3 倍；error 和loading 分別是載入失敗和載入中時的圖片佔位圖； attempt 是載入圖片的嘗試次數。

在需要懶載入的圖片位置，將src 屬性替換為v-lazy 指令：

<img v-lazy="path/to/image.png">

登入後複製

#在頁面中指定需要啟用懶加載的區域：

<template>
  <div class="container">
    <div class="item" v-for="item in list">
      <img v-lazy="item.src"> <!-- 图片使用懒加载 -->
      <p>{{ item.text }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          src: 'path/to/image-1.png',
          text: '图片 1'
        },
        {
          src: 'path/to/image-2.png',
          text: '图片 2'
        },
        {
          src: 'path/to/image-3.png',
          text: '图片 3'
        }
      ]
    }
  },
  mounted() {
    this.$nextTick(() => {
      // 启用懒加载
      this.$lazyload(this.$refs.container)
    })
  }
}
</script>

登入後複製

上述程式碼在頁面中循環展示一個圖片列表，每個圖片都使用了懶加載，同時在mounted 鉤子函數中指定啟用懶載入的區域為container 模組，這樣就可以實作圖懶載入。