Vue-Image-Lazyload

Rewrite (Vue-Lazyload)[https://github.com/hilongjw/vue-lazyload].

改变

为了与原插件进行一个区分，修改指令v-lazy为v-lazyload。指令绑定对象可以为字符串，也可以为一个JSON对象。当绑定字符串时，字符串为指定加载的图片地址；当绑定JSON对象时，那么指定src属性为加载的图片地址，loading、error为当前lazyload加载中和加载出错的图片。

安装

npm install vue-image-lazyload

例子

使用前端vue编译插件的.vue脚本编写组件举例。使用vue解析器更加方便组件的模版编写，代码看上去更加清晰分明。推荐使用！！！

<template>
	<!-- 使用字符串 -->
	<img v-lazyload="img.src" />
	<!-- 使用字符串，填充背景 -->
	<img v-lazyload:background-image="img.src" />
	<!-- 使用JSON对象，并使用全局的loading和error -->
	<img v-lazyload="{src: img.src}" />
	<!-- 使用JSON对象，并指定全局的loading和error -->
	<img v-lazyload="{src: img.src, loading: lazyload.loading, error: lazyload.error}" />
</template>

<script type="text/javascript" lang="es6">
	import Vue from 'vue'
	import VueImageLazyload from 'vue-image-lazyload'
	// 此处设定全局参数
	Vue.use(VueImageLazyload, {
		loading: 'data:img/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEXs7Oxc9QatAAAACklEQVQI12NgAAAAAgAB4iG8MwAAAABJRU5ErkJggg==',
		error: 'data:img/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEXs7Oxc9QatAAAACklEQVQI12NgAAAAAgAB4iG8MwAAAABJRU5ErkJggg==',
		try: 1
	})
	export default {
		data: {
			lazyload: {
				loading: '',
				error: ''
			},
			img: {
				src: 'http://...'
			}
		}
	}
</script>