vue lazy-load 懒加载

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可以看下图

vue lazy-load 懒加载_第1张图片

然后在组件里写法是

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

  这样就可以在页面里实现图片懒加载效果了,当然,官方给出的写法可能和我这个有点出入,但是木有关系啦。

还可以用css的写法,但是没试过,所以就不在这里讲了,要是说错了,丢人啊!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

  这个是官方的写法,有兴趣的可以试试。

你可能感兴趣的:(vue)