zengxiaohuan/vue-image-lazy

A image lazy loading plugin for vue. （vue图片懒加载插件）

vue-image-lazy

A image lazy loading plugin for vue.

Demo

Click me.

Brower compatibility

IE9+

Env

[email protected] + webpack + es6

Install

npm

$ npm install vue-image-lazy

Usage

Example

<div id="app">
    <img v-lazy="img" v-for="img in imgs">
</div>

<script>
	import 'babel-polyfill'; // es6 shim
	import Vue from 'vue';
	import vueLazy from 'vue-image-lazy';

    Vue.use(vueLazy, {
    	loading: 'imgs/default.jpg', //default image, if element has 'src' attribute, ignore this
    	error: 'imgs/error.jpg' //if image load failed, try to load the image
    });

    new Vue({
    	el: '#app',
    	data: {
    		imgs: [
    			'imgs/1.jpg',
    			'imgs/2.jpg',
    			'imgs/3.jpg',
    			'imgs/4.jpg',
    			'imgs/5.jpg',
    			'imgs/6.jpg',
    			'imgs/7.jpg',
    			'imgs/8.jpg'
    		]
    	}
    });

</script>