Lazyload 图片懒加载
编辑教程Lazyload 图片懒加载
引入
Lazyload 是 Vue 指令,使用前需要对指令进行注册
import Vue from 'vue';
import { Lazyload } from 'vant';
Vue.use(Lazyload);
// 注册时可以配置额外的选项
Vue.use(Lazyload, {
lazyComponent: true
});
代码演示
基础用法
将v-lazy指令的值设置为你需要懒加载的图片
<img v-for="img in imageList" v-lazy="img" >
export default {
data() {
return {
imageList: [
'https://img.yzcdn.cn/vant/apple-1.jpg',
'https://img.yzcdn.cn/vant/apple-2.jpg'
]
};
}
}
背景图懒加载
和图片懒加载不同,背景图懒加载需要使用v-lazy:background-image,值设置为背景图片的地址,需要注意的是必须声明容器高度。
<div v-for="img in imageList" v-lazy:background-image="img" />
组件懒加载
将需要懒加载的组件放在lazy-component标签中,即可实现组件懒加载。
// 注册时设置`lazyComponent`选项
Vue.use(Lazyload, {
lazyComponent: true
});
<lazy-component>
<img v-for="img in imageList" v-lazy="img" >
</lazy-component>
API
Options
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
loading | 加载时的图片 | string | - |
error | 错误时的图片 | string | - |
preload | 预加载高度的比例 | string | - |
attempt | 尝试次数 | number | 3 |
listenEvents | 监听的事件 | string[] | scroll等 |
adapter | 适配器 | object | - |
filter | 图片 URL 过滤 | object | - |
lazyComponent | 是否能懒加载模块 | boolean | false |
实例
Mos固件,小电视必刷固件
ES6 教程
Vue.js 教程
JSON 教程
jQuery 教程
HTML 教程
HTML 5 教程
CSS 教程
CSS3 教程
JavaScript 教程
DHTML 教程
JSON在线格式化工具
JS在线运行
JSON解析格式化
jsfiddle中国国内版本
JS代码在线运行
PHP代码在线运行
Java代码在线运行
C语言代码在线运行
C++代码在线运行
Python代码在线运行
Go语言代码在线运行
C#代码在线运行
JSRUN闪电教程系统是国内最先开创的教程维护系统, 所有工程师都可以参与共同维护的闪电教程,让知识的积累变得统一完整、自成体系。
大家可以一起参与进共编,让零散的知识点帮助更多的人。
X
![](http://cdns.jsrun.net/avatar/default.png)
选择支付方式:
![支付宝](/res/css/img/alipay.png)
![微信](/res/css/img/wxpay.png)
立即支付
![支付宝](/res/css/img/alipay.png)
¥
9.99
无法付款,请点击这里
金额: 0 元
备注:
转账时请填写正确的金额和备注信息,到账由人工处理,可能需要较长时间
备注:
转账时请填写正确的金额和备注信息,到账由人工处理,可能需要较长时间
如有疑问请联系QQ:565830900
正在生成二维码, 此过程可能需要15秒钟