vue-lazyload 插件使用

1，安装

// 安装
npm install vue-lazyload --save

2，注册

// 注册    main.js全局注册
import Vue from 'vue'
import vueLazyload from 'vue-lazyload'


Vue.use(vueLazyload);

在注册的时候是可以传入配置参数的，常规配置如下

Vue.use(VueLazyload, {
  preLoad: 1.3,
  error: 'dist/error.png',
  loading: 'dist/loading.gif',
  attempt: 1
})

可选的参数如下：
preLoad: 类型Number,默认1.3. 表示lazyload的元素距离页面底部距离的百分比.计算值为(preload - 1).
attempt: 图片加载失败后的重试次数.默认为3.
error: 类型string.图片加载失败后的显示的失败图片路径.
loading: 类型string.图片正在加载中显示的loading图片的路径.
listenEvents: 类型array.默认['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend', 'touchmove'].即是在监听上述事件中,判断图片是否在preload的位置.如果你不想在那么多事件中判断,可以指定一个或者几个.例如如果你给这个属性只指定['touchmove'].那么scroll 屏幕不会加载图片,只有手指滑动屏幕才会加载图片.

adapter: 注册img 的loading,loaded,error三个状态的回调函数,参数会暴露懒加载的img元素,可以对其进行操作.
filter: img未加载之前,解析到src 的时候注册的回调函数.可以在加载图片之前,对src进行修改.注册在filter下的所有的函数都会执行
lazyComponent: 类型Boolean.是否启用懒加载组件.<lazy-component>组件中的内容只有在出现在preload的位置中才会加载组件.这个lazyloadComponent 组件有个缺点就是,组件在加载前是什么都不渲染的,这样子的话,有可能会影响布局,以及加载前到加载后的切换不好,有点突兀和生硬.挖坑(vue懒加载组件)

observer: 是否启用IntersectionObserver,这个api有兼容问题
observerOptions: 默认{ rootMargin: '0px', threshold: 0.1 } 主要是我对这个pai不熟,按照vue-lazyload的说法是开启之后,

3，使用

vue文件中将需要懒加载的图片绑定 v-bind:src 修改为 v-lazy

<ul>
  <li v-for="img in list">
    <img v-lazy="img.src" >
  </li>
</ul>

<!-- img动态绑定 -->
<img class="viewDivNoBorder"
     v-lazy="item.media_url"
     :id="item.media_url"
     @dblclick="clickImg(item.media_url,index2,$event)" />

vue-lazyload 插件使用

猜你喜欢