【vue】vue-cli3構建項目中實現圖片懶加載

前兩天正好寫了文章如何用實現圖片懶加載【性能優化】JS實現圖片懶加載，今天在使用vue構建項目的時候就遇到了要做圖片懶加載的優化需要，本想把前兩天的代碼直接copy過來的，后來想查查看有沒有更簡便的方法，果不其然，vue中直接有插件可以使用，看了下實現時候的效果，實現原理都和原生js是一樣的，vue果然真香！

接下來我們來講vue-lazyload插件的使用：

1、安裝插件

cnpm i vue-lazyload -S

 

2、入口文件main.js中配置：

import Vue from 'vue'
import App from './App.vue'
import VueLazyLoad from 'vue-lazyload' // 引入插件
import errorImg from './assets/img/error.jpg'
import loadingImg from './assets/img/loading.jpg'

Vue.config.productionTip = false

Vue.use(VueLazyLoad, { // 注意：此項一定要寫在new Vue（{}）之前，否則會報錯：[Vue warn]: Failed to resolve directive: lazy
    preload: 1.3, // 預加載高度比例
    error: errorImg, // 圖片路徑出錯時加載圖片 此處
    loading: loadingImg, // 預加載圖片
    attempt: 6, // 嘗試加載圖片數量
    observer: true,
    observerOptions: {
        rootMargin: '0px',
        threshold: 0.1
    }
})

new Vue({
    render: h => h(App),
}).$mount('#app')

 

3、修改圖片顯示方式為懶加載

// 原本img寫法： <img v-for="item in imgList" :src="item.src" :alt="item.name">

// 懶加載寫法：
<img v-for="item in imgList" v-lazy="item.src" :alt="item.name">

 

注意：一定要注意第二步中的配置，切不可出現報錯的那種寫法。

 

【參考文章】

vue項目中實現圖片懶加載

vue-lazyload官方文檔