v2-lazy-image
v1.1.1
Published
A simple clean vue plugin for image lazy load. load image when it is within the viewport. no try again when load failed
Downloads
2
Readme
vue-lazy-image
A simple clean small size vue plugin for image lazy load. load image when it is within the viewport. no try again when load failed
require
Vue2, ES6
install
npm i v2-lazy-image
usage
// entry.js
import Vue from 'vue'
import LazyImg from 'v2-lazy-image'
// config object is optional
// if you want to preload image when it's close to the viewport, set the preload value > 1
Vue.use(LazyImg, {preload: 1.1})
<!--your component.vue-->
<template>
<img v-lazyimg="source" :src="defaultImage">
</template>
<script>
export default {
data () {
return {
source: '//path/xxx.png',
defaultImage: '//path/default.png'
}
}
}
</script>
<style>
/*set display to inline-block/block and set width/height to get correct BoundingClientRect*/
img {
display: inline-block;
width: 100%;
}
</style>
license
ISC