原生JS实现图片懒加载(lazyload)实例


Posted in Javascript onJune 13, 2017

前言

图片懒加载也是比较常见的一种性能优化的方法,最近在用vue做一个新闻列表的客户端时也用到了,这里就简单介绍下实现原理和部分代码。

实现原理

加载页面的时候,图片一直都是流量大头,针对图片的性能方法也挺多的比如base64、雪碧图等;懒加载也是其中一种,主要原理是将非首屏的图片src设为一个默认值,然后监听窗口滚动,当图片出现在视窗中时再给他赋予真实的图片地址,这样可以保证首屏的加载速度然后按需加载图片。

原生JS实现图片懒加载(lazyload)实例

具体代码

首先在渲染时,图片引用默认图片,然后把真实地址放在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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
获取css样式表内样式的js函数currentStyle(IE),defaultView(FF)
Feb 14 Javascript
jQuery实现等比例缩放大图片让大图片自适应页面布局
Oct 16 Javascript
JQuery插件fancybox无法在弹出层使用左右键的解决办法
Dec 25 Javascript
jquery如何判断表格同一列不同行input数据是否重复
May 14 Javascript
jquery实现浮动的侧栏实例
Jun 25 Javascript
JavaScript iframe数据共享接口实现方法
Jan 06 Javascript
JS数组返回去重后数据的方法解析
Jan 03 Javascript
Bootstrap表格使用方法详解
Feb 17 Javascript
Vue中axios的封装(报错、鉴权、跳转、拦截、提示)
Aug 20 Javascript
vue+ts下对axios的封装实现
Feb 18 Javascript
vue实现购物车功能(商品分类)
Apr 20 Javascript
springboot+vue+对接支付宝接口+二维码扫描支付功能(沙箱环境)
Oct 15 Javascript
angular bootstrap timepicker TypeError提示怎么办
Jun 13 #Javascript
解决bootstrap下拉菜单点击立即隐藏bug的方法
Jun 13 #Javascript
javascript实现非常简单的小数取整功能示例
Jun 13 #Javascript
微信小程序 新建登录页并实现tabBar隐藏
Jun 13 #Javascript
Node.js使用orm2进行update操作时关联字段无法修改的解决方法
Jun 13 #Javascript
bootstrap timepicker在angular中取值并转化为时间戳
Jun 13 #Javascript
微信小程序实现多个按钮toggle功能的实例
Jun 13 #Javascript
You might like
如何做到多笔资料的同步
2006/10/09 PHP
在Yii框架中使用PHP模板引擎Twig的例子
2014/06/13 PHP
中高级PHP程序员应该掌握哪些技术?
2016/09/23 PHP
Referer原理与图片防盗链实现方法详解
2019/07/03 PHP
对google个性主页的拖拽效果的js的完整注释[转]
2007/04/10 Javascript
Javascript学习笔记8 用JSON做原型
2010/01/11 Javascript
NodeJS框架Express的模板视图机制分析
2011/07/19 NodeJs
jquery获取html元素的绝对位置和相对位置的方法
2014/06/20 Javascript
jQuery.extend 函数及用法详细
2015/09/06 Javascript
js canvas实现适用于移动端的百分比仪表盘dashboard
2017/07/18 Javascript
vue中使用axios post上传头像/图片并实时显示到页面的方法
2018/09/27 Javascript
Vue中JS动画与Velocity.js的结合使用
2019/02/13 Javascript
深入理解react 组件类型及使用场景
2019/03/07 Javascript
JavaScript提升机制Hoisting详解
2019/10/23 Javascript
[04:48]DOTA2上海特锦赛小组赛第三日 TOP10精彩集锦
2016/02/28 DOTA
[02:32]“虐狗”镜头慎点 2016国际邀请赛中国区预选赛现场玩家采访
2016/06/28 DOTA
python中Genarator函数用法分析
2015/04/08 Python
Python迭代器和生成器定义与用法示例
2018/02/10 Python
在pycharm中使用git版本管理以及同步github的方法
2019/01/16 Python
用Python逐行分析文件方法
2019/01/28 Python
django富文本编辑器的实现示例
2019/04/10 Python
Python实战之制作天气查询软件
2019/05/14 Python
Python for i in range ()用法详解
2020/09/18 Python
如何将你的应用迁移到Python3的三个步骤
2019/12/22 Python
python中取绝对值简单方法总结
2020/07/24 Python
python如何使用腾讯云发送短信
2020/09/17 Python
英国男士时尚购物网站:Stuarts London
2017/10/22 全球购物
Vertbaudet西班牙网上商店:婴儿服装、童装、母婴用品和儿童家具
2019/10/16 全球购物
澳大利亚著名的纺织品品牌:Canningvale
2020/05/05 全球购物
信息专业毕业生五年职业规划参考
2014/02/06 职场文书
小学生母亲节演讲稿
2014/05/07 职场文书
作文评语集锦
2014/12/25 职场文书
语文教师个人工作总结
2015/02/06 职场文书
2015年度工程师评职称工作总结
2015/10/14 职场文书
《文化苦旅》读后感:阅读,让人诗意地栖居在大地上
2019/12/24 职场文书
使用 CSS 构建强大且酷炫的粒子动画效果
2022/08/14 HTML / CSS