私は以下のように要約、若い男は非常に良い簡潔に書いて見ました：
https://www.npmjs.com/package/vue-lazyload
まず、NPMにダウンロードVUE-lazyloadパッケージ
|
1
|
npm install vue-lazyload --save
|
その後、我々は、もちろん、これだけでは、パッケージの十分ではありません、main.jsパッケージをインポートし、他の文書は持っています
|
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を使用しますが、試していないので、ここで言うことはありませんし、間違っている場合することができ、恥ああ！
|
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>
|
これは、公式の文言で試すことができます興味を持っています。