vue懶加載插件vue-lazyload的使用

1.安裝vue-lazyload

npm i vue-lazyload --save

2.main.js中引入並使用vue-lazyload,注意loading圖片要放在static文件夾裏

import VueLazyLoad from 'vue-lazyload'
//使用懶加載插件,loading參數指定加載圖片的gif地址,這個gif也要放在static文件夾裏
Vue.use(VueLazyLoad,{
  loading:"../static/loading.gif"
})

3.在組件中須要懶加載的圖片中使用v-lazy代替src，注意：懶加載的圖片也是放在static文件夾裏

<div class="home">
    <div class="flex_ctn" >
        <div class="flex_item" v-for="(item,i) in  imgs ">
            <!-- v-lazy指令綁定圖片路徑 -->
            <img v-lazy="item.src" alt="">
        </div>
    </div>
</div>