# 懒加载插件
懒加载插件vue-lazyload
# 用法
main.js
import Vue from 'vue'
import App from './App.vue'
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload)
// or with options
Vue.use(VueLazyload, {
preLoad: 1.3,
error: 'dist/error.png',
loading: 'dist/loading.gif',//预加载的照片
})
new Vue({
el: 'body',
components: {
App
}
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
template:
<ul>
<li v-for="img in list">
<img v-lazy="img.src" >
</li>
</ul>
1
2
3
4
5
2
3
4
5
或者：
CDN: https://unpkg.com/vue-lazyload/vue-lazyload.js
<script src="https://unpkg.com/vue-lazyload/vue-lazyload.js"></script>
<script>
Vue.use(VueLazyload)
...
</script>
</script>
1
2
3
4
5
6
2
3
4
5
6
use v-lazy-container work with raw HTML
<div v-lazy-container="{ selector: 'img' }">
<img data-src="//domain.com/img1.jpg">
<img data-src="//domain.com/img2.jpg">
<img data-src="//domain.com/img3.jpg">
</div>
1
2
3
4
5
2
3
4
5
custom error and loading placeholder image
<div v-lazy-container="{ selector: 'img', error: 'xxx.jpg', loading: 'xxx.jpg' }">
<img data-src="//domain.com/img1.jpg">
<img data-src="//domain.com/img2.jpg">
<img data-src="//domain.com/img3.jpg">
</div>
1
2
3
4
5
2
3
4
5
# 修改load图片大小
在css中改变图片大小
img[lazy="loading"]{}
img[lazy="loaded"]{ }
1
2
2