lazy-vue is the easiest way to get a lazy image loader working within your vue projects. It is meant to be as simplest as possible, so you do not have to be pulling complicated libraries to accomplish such a task.
You will have to install vue
npm install vue
To install this package you just need to open your console line and type
npm install lazy-vue --save. If there is a problem during the installation, trying again using the
force param, as so
npm i -f lazy-vue
You will have to import the component in your application entry point, so you will be able to call it as global when need it. Example:
Take a look at the example published.
Implementing the directive in your HTML code
<div v-for="avatar in images"> <img src="demo/images/nopic.png" v-lazy = "avatar"> </div>
See the example here
Please feel free to fork this package and contribute by submitting a pull request to enhance the functionalities.
The MIT License (MIT).
How can I thank you?
Why not star the github repo? I'd love the attention! Why not share the link for this repository on Twitter? Spread the word!
Don't forget to follow me on twitter!
Gustavo Ocanto. [email protected]