Vue预加载和懒加载的使用方法

预加载：提前加载图片，当用户需要查看时可直接从本地缓存中渲染。
懒加载：懒加载的主要目的是作为服务器前端的优化，减少请求数或延迟请求数。
两者的行为是相反的，一个是提前加载，一个是迟缓甚至不加载。
懒加载对服务器前端有一定的缓解压力作用，预加载 则会增加服务器前端压力。

预加载：

简单理解：就是在使用该图片资源前，先加载到本地来，真正到使用时，直接从本地请求数据就行了。

 var arr = [
          '../picture/1.jpg',
          '../picture/2.jpg',
          '../picture/3.jpg',
      ];

      var imgs =[]
      preLoadImg(arr);

      //图片预加载方法
      function preLoadImg(pars){
          for(let i=0;i<arr.length;i++){
              imgs[i] = new Image();
              imgs[i].src = arr[i];
          }
      }

懒加载的使用方法：
这里使用vue-lazyload插件

1.下载依赖:
npm install vue-lazyload --save

2.引入：
import Vue from ‘vue’
import App from ‘@/App’
import VueLazyload from ‘vue-lazyload’

3.配置

Vue.use(VueLazyload, {
    preLoad: 1.3,//预载高度比例
    error: require('./assets/images/err.png'),//加载失败时图像的 src
    loading: require('./assets/images/loading.gif'),//加载时图像的 src
    attempt: 1,//	尝试次数
    listenEvents: ['scroll']//	你想让 vue 监听的事件
});

4.组件使用

<template>
  <div class="lazyLoad">
    <ul id="container">
      <li v-for="img in arr">
        <img v-lazy="img.thumbnail_pic_s">
      </li>
    </ul>
  </div>
</template>

<script>
  export default({
    name:"lazyLoad",
    data(){
      return{
        arr:[]
      }
    },
    mounted:function(){
    //请求本地数据
      this.$http.get('/api/data').then(res=>{
        this.arr=res.data.data;
        console.log(this.data)
      })
    },
  })
</script>

<style scoped>
li{
  list-style: none
}
</style>