VUE—vue-lazyload图片懒加载

1. 安装

npm i vue-lazyload -S

2. 配置 main.js

/***图片模板等懒加载 start ***/
import VueLazyload from 'vue-lazyload'
// 404图片
import errImg from './assets/img/404.png'
// loading图片
import loadingImg from './assets/img/loading-spin.svg'
 
// 图片懒加载配置
Vue.use(VueLazyload, {
  preLoad: 1.3, // 预加载高度比例
  error: errImg, // 图片路径错误时加载图片
  loading: loadingImg, // 预加载图片
  attempt: 1, // 尝试加载图片数量
  // set observer to true
  observer: true,
  // optional
  observerOptions: {
    rootMargin: '0px',
    threshold: 0.1
  }
})

3. 调用

 <!-- 图片懒加载-->
<img v-lazy="picUrl" />

参数选项说明

图片懒加载的简单效果已经实现了，然后就可以按这开发文档的api进行扩展了：

key	description	default	options
preLoad	proportion of pre-loading height（预加载高度比例）	1.3	Number
error	src of the image upon load fail（图片路径错误时加载图片）	'data-src'	String
loading	src of the image while loading（预加载图片）	'data-src'	String
attempt	attempts count（尝试加载图片数量）	3	Number
listenEvents	events that you want vue listen for （想要监听的vue事件） 默认['scroll']可以省略, 当插件跟页面中的动画或过渡等事件有冲突是可以尝试其他选项	['scroll'（默认）, 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend', 'touchmove']	Desired Listen Events
adapter	dynamically modify the attribute of element （动态修改元素属性）		Element Adapter
filter	the image's listener filter （动态修改图片地址路径）		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		IntersectionObserver