看到一个小伙子写的言简意赅很不错，摘录如下：
https://www.npmjs.com/package/vue-lazyload
首先我们先在npm上下载vue-lazyload的包
|
1
|
npm install vue-lazyload --save
|
然后我们在main.js里面import这个包，当然，单单这一个包是不够的，还得其他的文件
|
1
2
3
|
import
Vue from
'vue'
import
App from
'@/App'
import
VueLazyload from
'vue-lazyload'
|
然后我们配置vue-lazyload;
我是这样写的
|
1
2
3
4
5
|
Vue.use(VueLazyload, {
error:
'dist/error.png'
,
//这个是请求失败后显示的图片
loading:
'dist/loading.gif'
,
//这个是加载的loading过渡效果
try
: 2
// 这个是加载图片数量
})
|
官方给出的具体配置api可以看下图
然后在组件里写法是
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
<template>
<div id=
"rj"
>
<ul id=
"container"
>
<li v-
for
=
"img in list"
>
<img v-lazy=
"img"
>
</li>
</ul>
</div>
</template>
<script>
export
default
{
data () {
return
{
list: [
'http://st2.depositphotos.com/thumbs/2627021/image/9638/96385166/api_thumb_450.jpg!thumb'
,
'http://st2.depositphotos.com/thumbs/2627021/image/9638/96385166/api_thumb_450.jpg!thumb'
,
'http://st2.depositphotos.com/thumbs/2627021/image/9638/96385166/api_thumb_450.jpg!thumb'
,
'http://st2.depositphotos.com/thumbs/2627021/image/9638/96385166/api_thumb_450.jpg!thumb'
,
'http://st2.depositphotos.com/thumbs/2627021/image/9638/96385166/api_thumb_450.jpg!thumb'
,
'http://st2.depositphotos.com/thumbs/2627021/image/9638/96385166/api_thumb_450.jpg!thumb'
,
'http://st2.depositphotos.com/thumbs/2627021/image/9638/96385166/api_thumb_450.jpg!thumb'
,
]
}
}
}
</script>
|
这样就可以在页面里实现图片懒加载效果了，当然，官方给出的写法可能和我这个有点出入，但是木有关系啦。
还可以用css的写法，但是没试过，所以就不在这里讲了，要是说错了，丢人啊！
扫描二维码关注公众号，回复：
6693151 查看本文章
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<style>
img[lazy=loading] {
/*your style here*/
}
img[lazy=error] {
/*your style here*/
}
img[lazy=loaded] {
/*your style here*/
}
/*
or background-image
*/
.yourclass[lazy=loading] {
/*your style here*/
}
.yourclass[lazy=error] {
/*your style here*/
}
.yourclass[lazy=loaded] {
/*your style here*/
}
</style>
|
这个是官方的写法，有兴趣的可以试试。