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

╰+攻爆jí腚メ 2022-12-27 08:18 212阅读 0赞

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

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

官网解释：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbG8xNDE2_size_16_color_FFFFFF_t_70][]

最后：

插件地址：[vue-lazyload][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbG8xNDE2_size_16_color_FFFFFF_t_70]: /images/20221120/e1eb294b14f14e399972ec364a1a295a.png
[vue-lazyload]: https://github.com/hilongjw/vue-lazyload