vue图片懒加载（vue图片懒加载的插件 --- vue-lazyload）

图片懒加载是指当我们浏览页面时，只加载我们浏览器可视区的图片，向下滚动时再继续加载后面的图片

vue图片懒加载的插件--- vue-lazyload

一、安装插件：

cnpm install vue-lazyload --save-dev （npm、yarn也可以）

二、在main.js里引入 ：

​
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
//引入vue-lazyload
import VueLazyLoad from 'vue-lazyload'
Vue.use (VueLazyLoad)

Vue.config.productionTip = false

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

​

三、在懒加载页面 （Home.vue） 使用：

 v-lazy=" " 代替 v-bind:src=" "

<template>
  <div class="home">
    <ul>
      <li v-for="(item,index) in list" :key="index"> //key 必须要加 
        
        // v-lazy=" " 代替  v-bind:src=" "
      <img v-lazy="item.img" alt="">
    </li>
    </ul>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      list:{},
    };
  },
  created(){
    axios({
      url: "/list",  //(接口)
      // method: "post", 
    }).then(res => {
      console.log(res);
      this.list=res.data.data
    });
  },
};
</script>