vue图片懒加载 —— vue-lazyload的使用

前言：图片是网站优化的一个重点，图片懒加载是其中比较好用的一个方法。jquery也有很多图片懒加载的插件，今天看了一下vue的图片懒加载插件 ---- vue-lazyload。

1. 安装：cnpm install vue-lazyload --save-dev（当然可以用npm或者yarn哦）

2. main.js  中全局引入：

1. import VueLazyLoad from 'vue-lazyload'
2.  Vue.use(VueLazyLoad, {preLoad: 1,
3.  error: require('./assets/img/error.jpg'),
4.  loading: require('./assets/img/homePage_top.jpg'),
5.  attempt: 2,
6.  })

3. lazyloadDemo.vue（页面中）使用：

1.  <template>
2.  <div id="lazyload">
3.  <!-- img中使用图片懒加载。 v-lazy代替v-bind:src -->
4.  <ul class="img">
5.  <li v-for="(item,index) in imgList">
6.  <img v-lazy="item" alt="" style="width: 768px;">
7.  </li>
8.  </ul>
9.  
    
10.  <!-- 背景图中使用图片懒加载。 v-lazy:background-image = "" -->
11.  <ul class="bgImg">
12.  <li v-for="(item,index) in imgList" v-lazy:background-image="item"></li>
13.  </ul>
14.  </div>
15.  </template>
16.  <script>
17.  
    export default {
18.  name:'LazyLoadDemo',
19.  data(){
20.  return{
21.  imgList:[
22.  require('../assets/img/1.jpg'),
23.  require('../assets/img/2.jpg'),
24.  require('../assets/img/3.jpg'),
25.  require('../assets/img/4.jpg'),
26.  require('../assets/img/5.jpg'),
27.  require('../assets/img/6.jpg'),
28.  require('../assets/img/7.jpg'),
29.  require('../assets/img/8.jpg'),
30.  require('../assets/img/9.jpg'),
31.  require('../assets/img/10.jpg'),
32.  require('../assets/img/11.jpg'),
33.  require('../assets/img/12.jpg'),
34.  require('../assets/img/13.jpg'),
35.  require('../assets/img/14.jpg'),
36.  require('../assets/img/15.jpg'),
37.  require('../assets/img/16.jpg'),
38.  ],
39.  }
40.  }
41.  }
42.  
    </script>
43.  
    <style lang="scss" scoped>
44.  
    #lazyload{
45.  
    width: 768px;
46.  
     
47.  
    margin: 0 auto;
48.  
    .img{
49.  
    width: 768px;
50.  
     
51.  
    }
52.  
    .bgImg{
53.  
    li{
54.  
    width: 768px;
55.  
    height: 522px;
56.  
    margin-bottom: 10px;
57.  
    background-repeat: no-repeat; //注意图片大小哦，否则可以显示不全
58.  
    background-size: cover;
59.  
    }
60.  
    }
61.  
    }
62.  
    </style>
63.  
     

使用总结：

        img标签中使用懒加载：v-lazy 代替 v-bind:src ；

        背景图片中使用懒加载：v-lazy:background-image = ""  ==>> 注意图片和盒子大小问题，否则显示可能有问题哦。

        使用时最好给一个 key 属性，即：               

<img v-lazy="图片地址" :key="图片地址">

        :key=""  必须要加，否则就会出现，页面刷新，其他内容都刷新了，但是只有图片不刷新的情况 。因为key可能相同，所以页面不会更新！！！ 

官网解释：

 

最后：

插件地址：vue-lazyload

参考博客：https://www.cnblogs.com/xyyt/p/7650539.html

                  https://blog.csdn.net/bboyjoe/article/details/72677677

 

文章仅为本人学习过程的一个记录，仅供参考，如有问题，欢迎指出！

对博客文章的参考，若原文章博主介意，请联系删除！请原谅