vue实现图片懒加载的方法分析

{ }

Image listener filter

lazyComponent

lazyload component

false

Lazy Component

dispatchEvent

trigger the dom event

false

Boolean

throttleWait

throttle wait

200

Number

observer

use IntersectionObserver

false

Boolean

observerOptions

IntersectionObserver options{ rootMargin: ‘0px’, threshold: 0.1 }IntersectionObserver
 

实现懒加载，使用

v-lazy

代替

src

属性

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

对图片单独进行配置

方法1

<div v-lazy-container="{ selector: 'img', error: 'xxx.jpg', loading: 'xxx.jpg' }"></div>

方法2

将

v-lazy='obj'

   赋值一个对象

在data里面声明对象

可以设置三个属性

src

  图片  loading加载状态下的图片 

error

错误状态下的图片

希望本文所述对大家vue.js程序设计有所帮助。