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. <!-- 背景圖中使用圖檔懶加載。 v-lazy:background-image = "" -->

10. <ul class="bgImg">

11. <li v-for="(item,index) in imgList" v-lazy:background-image="item"></li>

12. </ul>

13. </div>

14. </template>

15. <script>

16. export default {

17. name:'LazyLoadDemo',

18. data(){

19. return{

20. imgList:[

21. require('../assets/img/1.jpg'),

22. require('../assets/img/2.jpg'),

23. require('../assets/img/3.jpg'),

24. require('../assets/img/4.jpg'),

25. require('../assets/img/5.jpg'),

26. require('../assets/img/6.jpg'),

27. require('../assets/img/7.jpg'),

28. require('../assets/img/8.jpg'),

29. require('../assets/img/9.jpg'),

30. require('../assets/img/10.jpg'),

31. require('../assets/img/11.jpg'),

32. require('../assets/img/12.jpg'),

33. require('../assets/img/13.jpg'),

34. require('../assets/img/14.jpg'),

35. require('../assets/img/15.jpg'),

36. require('../assets/img/16.jpg'),

37. require('../assets/img/17.jpg'),

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

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

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

41. ],

42. }

43. }

44. }

45. </script>

46. <style scoped>

47. #lazyload{

48. width: 768px;

49. background-color: #fcc;

50. margin: 0 auto;

51. .img{

52. width: 768px;

53. background-color: #fcc;

54. }

55. .bgImg{

56. li{

57. width: 768px;

58. height: 522px;

59. margin-bottom: 10px;

60. background-repeat: no-repeat; //注意圖檔大小哦，否則可以顯示不全

61. background-size: cover;

62. }

63. }

64. }

65. </style>

使用總結：

        img标簽中使用懶加載：v-lazy 代替 v-bind:src ；

        背景圖檔中使用懶加載：v-lazy:background-image = ""  ==>> 注意圖檔和盒子大小問題，否則顯示可能有問題哦。

        使用時最好給一個 key 屬性，即：               

<img v-lazy="圖檔位址" :key="圖檔位址">
           

        :key=""  必須要加，否則就會出現，頁面重新整理，其他内容都重新整理了，但是隻有圖檔不重新整理的情況 。因為key可能相同，是以頁面不會更新！！！ 

官網解釋：

最後：

插件位址：vue-lazyload