JavaEE
鸿蒙应用开发
HTML&JS+前端
Python+大数据开发
人工智能开发
电商视觉设计
软件测试
新媒体+短视频
集成电路应用开发
C/C++
狂野架构师
IP短视频
图片懒加载实现原理？如何实现懒加载？
更新时间:2021年09月29日18时15分 来源:传智教育 浏览次数:
图片懒加原理
图片懒加载的原理很简单，就是我们先设置图片的data-set属性(当然也可以是其他任意的，只要不会发送http请求就行了，作用就是为了存取值)值为其图片路径，由于不是src，所以不会发送http请求。 然后我们计算出页面scrollTop的高度和浏览器的高度之和，如果图片举例页面顶端的坐标Y(相对于整个页面，而不是浏览器窗口)小于前两者之和，就说明图片就要显示出来了(合适的时机，当然也可以是 其他情况)，这时候我们再将 data-set属性替换为src属性即可。
图片懒加载实现步骤：
1. 在main.js中导入Vant中的Lazyload指令并注册：
import Vue from 'vue'
import { Lazyload } from 'vant' // 导入懒加载模块Lazyload
Vue.use(Lazyload) // 注册懒加载指令
2. 为van-image设置lazy-load指令属性
<!-- lazy-load设置图片懒加载，是一个自定义指令 --> <van-image width="90" height="90" :src="item2" lazy-load/>
猜你喜欢：
最新资讯
0
分享到：
江苏传智播客教育科技股份有限公司 版权所有Copyright 2006-2024 All Rights Reserved 苏ICP备16007882号营业执照增值电信业务经营许可证出版物经营许可证
苏公网安备 32132202001156号