原生JS实现图片懒加载(lazyload)实例
前言
图片懒加载也是比较常见的一种性能优化的方法,最近在用vue做一个新闻列表的客户端时也用到了,这里就简单介绍下实现原理和部分代码。
实现原理
加载页面的时候,图片一直都是流量大头,针对图片的性能方法也挺多的比如base64、雪碧图等;懒加载也是其中一种,主要原理是将非首屏的图片src设为一个默认值,然后监听窗口滚动,当图片出现在视窗中时再给他赋予真实的图片地址,这样可以保证首屏的加载速度然后按需加载图片。
具体代码
首先在渲染时,图片引用默认图片,然后把真实地址放在data-*属性上面。
<image src='./../assets/default.png' :data-src='item.allPics' class='lazyloadimg'>
然后是监听滚动,直接用window.onscroll就可以了,但是要注意一点的是类似于window的scroll和resize,还有mousemove这类触发很频繁的事件,最好用节流(throttle)或防抖函数(debounce)来控制一下触发频率。underscore和lodash里面都有封装这两个方法,这里先不多做介绍了。
接着要判断图片是否出现在了视窗里面,主要是三个高度:1,当前body从顶部滚动了多少距离。2,视窗的高度。3,当前图片距离顶部的距离。具体代码如下:
window.onscroll =_.throttle(this.watchscroll, 200); watchscroll () { var bodyScrollHeight = document.body.scrollTop;// body滚动高度 var windowHeight = window.innerHeight;// 视窗高度 var imgs = document.getElementsByClassName('lazyloadimg'); for (var i =0; i < imgs.length; i++) { var imgHeight = imgs[i].offsetTop;// 图片距离顶部高度 if (imgHeight < windowHeight + bodyScrollHeight) { imgs[i].src = imgs[i].getAttribute('data-src'); img[i].className = img[i].className.replace('lazyloadimg','') } } }
结语
大概内容就这么多了,下次可能会补充一下防抖节流源码的实现。最后再补充两个常见的滚动判断:
1.页面滚动离开首屏(这时可显示回到顶部的按钮):document.body.scrollTop > window.innerHeight
2.页面滚动到底部了(这时可去调接口获取更多内容):window.scrollY + window.innerHeight > document.body.offsetHeight
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- [先行者周末课程] 日历组件的开发思路讲解&&日历组件在实际工作中的使用方式
- Batik渲染png图片异常的bug修复
- SpringMVC支持跨域的两种姿势
- SpringMVC返回图片的几种方式
- Redis实现分布式锁相关注意事项
- React Native调用Android相机图库
- SpringMVC之请求参数的获取方式
- 糖大夫--测量流程性能监控自动化方案设计
- ReactNative调用Android原生模块
- jvm调优的工具介绍
- Python时间序列预测案例研究:巴尔的摩年度用水量
- [一对一课程] 之 设计并实现第一个JS模块?
- React Native 使用react-native-image-picker库实现图片上传功能
- 再谈Android动态链接库
- 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 数组属性和方法
- 小程序访问https显示网络错误,微信打开https空白、浏览器访问正常 解决方案
- Python GUI项目实战(七)学生信息的修改、删除和保存
- Python | 使用argparse解析命令行参数
- LeetCode 98 | 判断二叉搜索树是否合法
- LeetCode 96,n个数构建BST的方法有多少种?
- Go语言 | goroutine不只有基础的用法,还有这些你不知道的操作
- 每日一题 | 二进制操作问题
- Pandas | Dataframe的merge操作,像数据库一样尽情join
- 每日一题 | 灾后重建问题
- 树形结构已知子节点找父节点
- 解析 hashMap 源码之基本操作 get
- RCE(远程命令/代码执行漏洞)原理及复现
- 我的Vue不小心跨域了o(╥﹏╥)o 干它
- 金九银十准备季——Java后端多线程&并发面试题及答案(二)
- TypeScript 设计模式之观察者模式