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>