vue lazy-load 懒加载
来源:互联网 发布:农村淘宝app最新版下载 编辑:程序博客网 时间:2024/06/06 03:40
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的写法,但是没试过,所以就不在这里讲了,要是说错了,丢人啊!
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>
这个是官方的写法,有兴趣的可以试试。
阅读全文
0 0
- vue lazy-load 懒加载
- 小白入门---Vue懒加载(vue-lazy-load)
- Lazy Load 图片懒加载
- 图片的懒加载lazy-load.js
- 延时加载(lazy load)
- jQuery插件-Lazy Load延迟加载图片
- 使用lazy load延迟图片的加载
- jQuery图片延迟加载插件Lazy Load
- jQuery Lazy Load 图片延迟加载
- jQuery Lazy Load 图片延迟加载
- jQuery Lazy Load 图片延迟加载
- jQuery Lazy Load 图片延迟加载
- jQuery Lazy Load 图片延迟加载
- ionic 、ionic-image-lazy-load网络图片的懒加载和和加载效果,居中显示
- ionic图片资源懒加载,延迟加载—— ionic-image-lazy-load
- Swift 懒加载(lazy)
- swift lazy 懒加载
- Swift- lazy 懒加载
- Java多线程(二):线程同步synchronized和volatile
- Open-drain与Totem-pole(开漏与推挽电路)
- 一次机试之后的心得体会,附分页查询实现
- 传统企业还照着传统的思路搞信息化建设,恐怕时间不等人了
- 【安全牛学习笔记】无线网运行模式和无线网硬件设备及基本概念
- vue lazy-load 懒加载
- MySql5.7 密码安全策略
- MySQL高可用架构之MHA
- ssh不能登陆linux系统
- Codeforces Round #434 (Div. 2)
- CentOS配置PXE启动 tftp+DHCP 批量安装系统
- 进程间的几种通信方式
- POJ 2115 不穿衣服的扩展欧几里得
- 常用Git命令行