直播平臺搭建，vue中實現圖片懶載入的幾種方法

直播平臺搭建，vue中實現圖片懶載入的幾種方法

一、使用Vue本身的指令

Vue本身提供了一個指令v-lazy，可以實現圖片懶載入。使用方式如下：

<img v-lazy="imageSrc" />

其中，imageSrc是需要懶載入的圖片路徑。當圖片進入可視區域時，Vue會自動載入圖片。

二、使用第三方庫(推薦)

vue社群中有許多第三方庫可以實現圖片懶載入，例如vue-lazyload、vue-lazyload-enhanced等。這些庫提供了更多的配置項和功能，可以滿足更多的需求。使用方式如下：

2.1  安裝下載

npm i vue-lazyload@1.2.3 -S

2.2  main.js 匯入

import VueLazyload from 'vue-lazyload'
 
Vue.use(VueLazyLoad, {
  // 可選配置項，可省略
  error: require('./error.jpg'), // 載入失敗時顯示的圖片
  loading: require('./loading.gif'), // 載入中時顯示的圖片
  preLoad: 1.3, // 預載入高度的比例
  attempt: 3 // 嘗試載入次數
})

2.3  頁面使用

<template>  
  <div>  
    <img v-lazy="imageSrc" />  
  </div>  
</template>  
  
<script>   
import Vue from 'vue'       // main.js 已引入的可忽略
import VueLazyload from 'vue-lazyload'  // main.js 已引入的可忽略
Vue.use(VueLazyload, {      // main.js 已引入的可忽略 
  // 配置項...  
})  
</script>
 
 
// 個人實操使用，可參考
<template>
  <div>
    <div>
      <img v-for="(url, index) in imgUrl" :key="index" v-lazy="url" /> // 遍歷圖片
    </div>
  </div>
</template>
 
<script>
  export default {
    data() {
      return {
        imgUrl: [  // 需要顯示的所有圖片
          require('@/assets/help/1.jpg'),
          require('@/assets/help/2.jpg'),
          require('@/assets/help/3.jpg'),
          require('@/assets/help/4.jpg'),
          require('@/assets/help/5.jpg'),
        ],
      }
    },
  }
</script>
<style scoped> // 根據視口大小顯示圖片寬度
  @media screen and (max-width: 1200px) {
    .demo-image__lazy img {
      width: 100%;
    }
  }
  @media screen and (min-width: 1200px) {
    .demo-image__lazy img {
      width: 50%;
    }
  }
</style>

 三、自定義指令

除了使用Vue本身的指令和第三方庫外，還可以透過自定義指令來實現圖片懶載入。在自定義指令中，可以透過Intersection Observer API來監聽目標元素的交叉狀態，從而實現圖片的懶載入。使用方式如下：

<template>  
  <div>  
    <img v-lazyload="imageSrc" />  
  </div>  
</template>  
  
<script>  
export default {  
  directives: {  
    lazyload: {  
      inserted: function (el, binding) {  
        const observer = new IntersectionObserver(([entry]) => {  
          if (entry.isIntersecting) {  
            const img = new Image()  
            img.src = binding.value  
            el.appendChild(img)  
            observer.unobserve(el)  
          }  
        }, {threshold: 0.1})  
        observer.observe(el)  
      }  
    }  
  }  
}  
</script>

 以上就是 直播平臺搭建，vue中實現圖片懶載入的幾種方法，更多內容歡迎關注之後的文章