vue-lazyload-images
A Vue.js project
Build Setup
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
# build for production and view the bundle analyzer report
npm run build --report
# run unit tests
npm run unit
# run e2e tests
npm run e2e
# run all tests
npm test
For a detailed explanation on how things work, check out the guide and docs for vue-loader.
Installation
npm
$ npm i vue-lazyload-images -S
Usage
main.js:
import Vue from 'vue'
import App from './App.vue'
import VueImgLazyload from 'vue-lazyload-images'
Vue.directive('imglazyload', VueImgLazyload)
new Vue({
el: '#app',
render: h => h(App)
})
template:
<ul v-imglazyload>
<li v-for="item in list">
<img :data-src="item.imgUrl" class="lazy">
li>
ul>
use background-image
">
<ul v-imglazyload> <li v-for="item in list"> <div :data-bg="item.imgUrl" class="lazy">div> li> ul>
63 Jul 19, 2022
9 Mar 31, 2022
4 Nov 15, 2022
56 Sep 9, 2022
0 Mar 29, 2020
1 Jan 4, 2022
23 Nov 4, 2022
67 Nov 24, 2022
107 Nov 16, 2022
252 Nov 21, 2022
57 Dec 22, 2022
26 Mar 9, 2022
29 Jul 14, 2022
2 Aug 13, 2018
25 Aug 11, 2021
91 Nov 18, 2021
0 Dec 9, 2022
711 Dec 9, 2022
99 Oct 27, 2022