lazyImage

提示

图片懒加载，图片在可视范围内时再加载图片资源

基础语法：v-lazyImage:image/background.修饰符='选项'

---

修饰符：

• once：元素与可视窗口交叉后移除监听该元素

---

可用的选项：

• 字符串：src 地址
• 对象：
  • src：src 地址
  • loadingSrc：图片加载完成前的替代图片
  • loadingTime：图片加载完成到替换的的最大缓冲时间
  • show：可视范围外到可视范围内时的回调 () => {}
  • hide：可视范围内到可视范围外时的回调 () => {}
  • options：具体查看 - IntersectionObserver
    • root：视口元素
    • rootMargin：一个在计算交叉值时添加至根的边界盒，可以有效的缩小或扩大根的判定范围从而满足计算需要，语法和 CSS 中的margin 属性等同
    • threshold：规定了一个监听目标与边界盒交叉区域的比例值，可以是一个具体的数值或是一组 0.0 到 1.0 之间的数组

---

支持的图片用途：

• image
• background

简单使用

demo1

<img
  class="demo-img"
  v-preview
  v-lazyImage.once="'http://web.huaweiyun.zwyznswwy.com/note/note1.jpg'"
  alt=""
/>

设置背景

demo2

<img
  class="demo-img"
  v-preview
  v-lazyImage.once="'http://web.huaweiyun.zwyznswwy.com/note/note1.jpg'"
  alt=""
/>

设置加载态

demo3

<img
  class="demo-img"
  v-preview
  v-lazyImage.once="{
    src: 'http://web.huaweiyun.zwyznswwy.com/note/note1.jpg',
    loadingSrc: 'http://web.huaweiyun.zwyznswwy.com/note/note2.jpg',
  }"
  alt=""
/>

设置缓冲时间

demo4

<img
  class="demo-img"
  v-preview
  v-lazyImage.once="{
    src: 'http://web.huaweiyun.zwyznswwy.com/note/note1.jpg',
    loadingSrc: 'http://web.huaweiyun.zwyznswwy.com/note/note2.jpg',
    loadingTime: 2000
  }"
  alt=""
/>

设置回调函数

demo5

<img
  class="demo-img"
  v-preview
  v-lazyImage="{
    src: 'http://web.huaweiyun.zwyznswwy.com/note/note1.jpg',
    show,
    hide
  }"
  alt=""
/>