Vant引入CDN实现图片懒加载
时间:2022-07-24
本文章向大家介绍Vant引入CDN实现图片懒加载,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.suoluomei.com/common/js2.0/npm/vant@2.2/lib/index.css">
</head>
<style>
img {
width: 100%;
height: 100%;
}
</style>
<body>
<div class="box">
<div class="img" v-for="(item,index) in imgList" :key="index">
<img v-lazy="item">
</div>
</div>
</body>
<script src="https://cdn.suoluomei.com/common/js2.0/vue/v2.5.16/vue.js"></script>
<script src="https://cdn.suoluomei.com/common/js2.0/npm/vant@2.2/lib/vant.min.js"></script>
<script>
Vue.use(vant.Lazyload, {
lazyComponent: true
});
new Vue({
el: '.box',
data: {
imgList: ['https://sucai.suoluomei.cn/sucai_zs/images/20200521092752-1.png',
'https://sucai.suoluomei.cn/sucai_zs/images/20200521092752-1.png',
'https://sucai.suoluomei.cn/sucai_zs/images/20200521092752-1.png',
'https://sucai.suoluomei.cn/sucai_zs/images/20200521092752-1.png',
'https://sucai.suoluomei.cn/sucai_zs/images/20200521092752-1.png']
}
})
</script>
</html>
- Ryu:网络时延探测应用
- box布局
- Event Loop
- 把图片变成字体,然后在引入到网页
- Flutter环境搭建
- java.net.ConnectException: Call From slaver1/192.168.19.128 to slaver1:8020 failed on connection exc
- 18/03/18 04:53:44 WARN TaskSchedulerImpl: Initial job has not accepted any resources; check your clu
- 技术干货 | Hadoop3.0稳定版安装攻略来啦!
- ios逆向工具MonkeyDev简介
- 自定义下拉列表
- 身份证号码验证算法
- 技术干货 | hive安装部署
- js图片的预加载功能
- 简单理解通过原型继承
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- JavaScript 技术篇-js获取窗口标题名,获取页面URL地址
- Pyhon海龟绘制木叶村徽章
- MIT大神写给女神的Q版Python画图库—Cutecharts【技术创作101训练营】
- JavaScript 技术篇-js创建dom节点,并设置属性
- 容器中的数据管理
- Java基础 方法
- Python 技术篇-pyperclip库实现读取写入剪切板,超简单
- 基于consul的Docker-overlay跨多宿主机容器网络
- Python 微信机器人-向指定名称的好友发送微信消息
- JavaScript技术篇-js提升网页视频播放速率,提高慕课网视频播放速度
- 使用docker五步搭建ELK日志收集分析系统
- HDFS之SequenceFile和MapFile
- 配置ELK技术栈来分析apache tomcat日志
- LVS DR模式搭建,keepalived + lvs
- Ubuntu安装docker