在vue中使用图片懒加载vue-lazyload插件详细使用步骤

使用方式

__________________________________________________________________________________________________

使用vue的 vue-lazyload 插件
 

Installation 安装方式
 

npm

1.  

2. $ npm i vue-lazyload -D

CDN

CDN: https://unpkg.com/vue-lazyload/vue-lazyload.js

1. <script src="https://unpkg.com/vue-lazyload/vue-lazyload.js"></script>

2. <script>

3. Vue.use(VueLazyload)

4. ...

5. </script>

用法

main.js 在入口文件

1.  

2. import Vue from 'vue'

3. import App from './App.vue'

4. import VueLazyload from 'vue-lazyload' //引入这个懒加载插件

5.  

6. Vue.use(VueLazyload)

7.  

8. // 或者添加VueLazyload 选项

9. Vue.use(VueLazyload, {

10.  loading:"/static/loading-svg/loading-bars.svg"

11. })

12.  

13. new Vue({

14. el: 'body',

15. components: {

16. App

17. }

18. })

在入口文件添加后，在组件任何地方都可以直接使用把 img 里的:src -> v-lazy

1. <div class="pic">

2. <a href="#"><img :src="'/static/img/' + item.productImage" alt=""></a>

3. </div>

4.  

5. 把之前项目中img 标签里面的 :src 属性 改成 v-lazy

6. <div class="pic">

7. <a href="#"><img v-lazy="'/static/img/' + item.productImage" alt=""></a>

8. </div>

参数选项说明

key	description	default	options
preLoad	proportion of pre-loading height	1.3	Number
error	当加载图片失败的时候	'data-src'	String
loading	当加载图片成功的时候	'data-src'	String
attempt	尝试计数	3	Number
listenEvents	想要监听的事件	['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend', 'touchmove']	Desired Listen Events
adapter	动态修改元素属性	{ }	Element Adapter
filter	图片监听或过滤器	{ }	Image listener filter
lazyComponent	lazyload component	false	Lazy Component
dispatchEvent	触发dom事件	false	Boolean
throttleWait	throttle wait	200	Number
observer	use IntersectionObserver	false	Boolean
observerOptions	IntersectionObserver options	{ rootMargin: '0px', threshold: 0.1 }	IntersectionObserver

想要监听的事件

您可以通过传递数组来配置想要使用vue - lazyload的事件
监听器的名字。

1. Vue.use(VueLazyload, {

2. preLoad: 1.3,

3. loading:"/static/loading-svg/loading-bars.svg"

4. attempt: 1,

5. // the default is ['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend']

6. listenEvents: [ 'scroll' ]

7. })