原生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 相关文章推荐
Firefox window.close()的使用注意事项
Apr 11 Javascript
jquery模拟按下回车实现代码
Sep 20 Javascript
JS+CSS设置img在DIV中只显示Img垂直居中的部分
Oct 24 Javascript
jquery自动切换tabs选项卡的具体实现
Dec 24 Javascript
JS中Location使用详解
May 12 Javascript
JavaScript获取表格(table)当前行的值、删除行、增加行
Jul 03 Javascript
浅析JavaScript的几种Math函数,random(),ceil(),round(),floor()
Dec 22 Javascript
EasyUI学习之Combobox级联下拉列表(2)
Dec 29 Javascript
node.js中express-session配置项详解
May 31 Javascript
详解如何使用Node.js编写命令工具——以vue-cli为例
Jun 29 Javascript
vue scroller返回页面记住滚动位置的实例代码
Jan 29 Javascript
vue请求数据的三种方式
Mar 04 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
浅谈PHP 闭包特性在实际应用中的问题
2009/10/30 PHP
PHP is_dir() 判断给定文件名是否是一个目录
2010/05/10 PHP
typecho插件编写教程(五):核心代码
2015/05/28 PHP
php实现用已经过去多长时间的方式显示时间
2015/06/05 PHP
ThinkPHP实现转换数据库查询结果数据到对应类型的方法
2017/11/16 PHP
PHP应用跨时区功能的实现方法
2019/03/21 PHP
laravel 自定义常量的两种方案
2019/10/14 PHP
HR vs CL BO3 第二场 2.13
2021/03/10 DOTA
解析Jquery中如何把一段html代码动态写入到DIV中(实例说明)
2013/07/09 Javascript
jquery实现文本框数量加减功能的例子分享
2014/05/10 Javascript
javascript中JSON.parse()与eval()解析json的区别
2016/05/19 Javascript
JavaScript面试题(指针、帽子和女朋友)
2016/11/23 Javascript
js判断手机号是否正确并返回的实现代码
2017/01/17 Javascript
jQuery实现选中行变色效果(实例讲解)
2017/07/06 jQuery
如何使用VuePress搭建一个类型element ui文档
2019/02/14 Javascript
layer.open 子页面弹出层向父页面传输数据的例子
2019/09/26 Javascript
解决echarts vue数据更新,视图不更新问题(echarts嵌在vue弹框中)
2020/07/20 Javascript
详解JavaScript之Array.reduce源码解读
2020/11/01 Javascript
基于python指定包的安装路径方法
2018/10/27 Python
django自定义非主键自增字段类型详解(auto increment field)
2020/03/30 Python
QT5 Designer 打不开的问题及解决方法
2020/08/20 Python
基于Python实现粒子滤波效果
2020/12/01 Python
伦敦一家非常流行的时尚精品店:Oxygen Boutique
2017/01/15 全球购物
新闻专业大学生找工作的自我评价
2013/10/30 职场文书
留学生如何写好自荐信
2013/12/27 职场文书
教师评优事迹材料
2014/01/10 职场文书
工程安全员岗位职责
2014/03/09 职场文书
文体活动实施方案
2014/03/27 职场文书
四风问题个人对照检查材料
2014/09/26 职场文书
群众路线剖析材料范文
2014/10/09 职场文书
小学教师求职信范文
2015/03/20 职场文书
2015社区个人工作总结范文
2015/05/13 职场文书
爱国主义教育主题班会
2015/08/13 职场文书
防震减灾主题班会
2015/08/14 职场文书
导游词之山西-五老峰
2019/10/07 职场文书
【海涛教你打DOTA】死灵飞龙第一视角解说
2022/04/01 DOTA