vue2-lazy v1.0.2

vue2-lazy

A vue lazy load image component

demo

Build Setup

# install dependencies
npm i vue2-lazy -s || yarn add vue2-lazy

// main.js
import Vue from 'vue'
import lazyLoad from 'vue2-lazy'
import ERRIMAGE from 'path/to/err.png'

const option = {
  aspectRatio: 1, // 默认图片宽高比
  err: ERRIMAGE,  // 默认加载错误图
  loadTime: 1000  // 默认加载时机
}
Vue.use(lazyLoad， option) // 建议传递option对象 适配项目

new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

 <!-- app.vue -->
<template>
  <div id="app">
    <someThingYourComponents/>
    <!-- 建议全局修改默认aspectRatio -->
    <lazyLoad src="path/to/image.png"/>
    <!-- slot自定义loading -->
    <lazyLoad src="https://img.mukewang.com/5ad015060001608909360316.jpg">
      <span slot="icon">hello</span>
    </lazyLoad>

  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>

</style>

props

event

slot

option

Tips

1. 强烈建议传递aspectRatio 可以更好适配布局，不会引起重流
2. Vue.use(lazyLoad, option) 可以传递option对象 重写 props default 修改全局默认图片宽高比， 错误展示图， 图片延迟
3. 通过slot icon 插槽 自定义 loading动画

TODO

x demo演示 多种load效果 x 自定义load(slot) 解决向上滚动 懒加载