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

前言：图片是网站优化的一个重点，图片懒加载是其中比较好用的一个方法。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, {

3. preLoad: 1,

4. error: require('./assets/img/error.jpg'),

5. loading: require('./assets/img/homePage_top.jpg'),

6. attempt: 2,

7. })

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. require('../assets/img/17.jpg'),

39. require('../assets/img/18.jpg'),

40. require('../assets/img/19.jpg'),

41. require('../assets/img/20.jpg'),

42. ],

43. }

44. }

45. }

46. </script>

47. <style lang="scss" scoped>

48. #lazyload{

49. width: 768px;

50. background-color: #fcc;

51. margin: 0 auto;

52. .img{

53. width: 768px;

54. background-color: #fcc;

55. }

56. .bgImg{

57. li{

58. width: 768px;

59. height: 522px;

60. margin-bottom: 10px;

61. background-repeat: no-repeat; //注意图片大小哦，否则可以显示不全

62. background-size: cover;

63. }

64. }

65. }

66. </style>

    
    

使用总结：

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

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

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

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

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

官网解释：

 

最后：

插件地址：vue-lazyload