原生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 相关文章推荐
JQuery弹出层示例可自定义
May 19 Javascript
JavaScript模块化开发之SeaJS
Dec 13 Javascript
详解jQuery Mobile自定义标签
Jan 06 Javascript
JavaScript注入漏洞的原理及防范(详解)
Dec 04 Javascript
jQuery插件FusionCharts实现的2D面积图效果示例【附demo源码下载】
Mar 06 Javascript
基于Bootstrap框架实现图片切换
Mar 10 Javascript
AngularJS动态添加数据并删除的实例
Feb 27 Javascript
JS实现字符串去重及数组去重的方法示例
Apr 21 Javascript
微信小程序中显示倒计时代码实例
May 09 Javascript
layui使用label标签的方法
Sep 14 Javascript
js中Function引用类型常见有用的方法和属性详解
Dec 11 Javascript
JS数组方法push()、pop()用法实例分析
Jan 18 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单例模式
2014/11/25 PHP
PHP四舍五入、取整、round函数使用示例
2015/02/06 PHP
php中使用GD库做验证码
2016/03/31 PHP
Laravel学习教程之本地化模块
2017/08/18 PHP
Laravle eloquent 多对多模型关联实例详解
2017/11/22 PHP
php报错502badgateway解决方法
2019/10/11 PHP
JavaScript 对Cookie 操作的封装小结
2009/12/31 Javascript
JQuery从头学起第三讲
2010/07/06 Javascript
javascript的propertyIsEnumerable()方法使用介绍
2014/04/09 Javascript
node网页分段渲染详解
2016/09/05 Javascript
JavaScript制作颜色反转小游戏
2016/09/25 Javascript
jquery动态添加带有样式的HTML标签元素方法
2018/02/24 jQuery
angular6.0开发教程之如何安装angular6.0框架
2018/06/29 Javascript
微信JS-SDK updateAppMessageShareData安卓不能自定义分享详解
2019/03/29 Javascript
nodejs和react实现即时通讯简易聊天室功能
2019/08/21 NodeJs
vue组件 keep-alive 和 transition 使用详解
2019/10/11 Javascript
NodeJS和浏览器中this关键字的不同之处
2021/03/03 NodeJs
python进阶教程之循环相关函数range、enumerate、zip
2014/08/30 Python
Python编程之变量赋值操作实例分析
2017/07/24 Python
Python实现生成随机数据插入mysql数据库的方法
2017/12/25 Python
Python实现扣除个人税后的工资计算器示例
2018/03/26 Python
Python中如何使用if语句处理列表实例代码
2019/02/24 Python
pyqt5 获取显示器的分辨率的方法
2019/06/18 Python
python模拟键盘输入 切换键盘布局过程解析
2019/08/15 Python
python 实现矩阵填充0的例子
2019/11/29 Python
Python模块 _winreg操作注册表
2020/02/05 Python
Pandas中DataFrame基本函数整理(小结)
2020/07/20 Python
Python3爬虫RedisDump的安装步骤
2021/02/20 Python
html5声频audio和视频video等新特性详细说明
2012/12/26 HTML / CSS
国家地理在线商店:Shop National Geographic
2018/06/30 全球购物
舞蹈教育学专业推荐信
2013/11/27 职场文书
市级三好学生事迹材料
2014/08/27 职场文书
体育专业大学生职业生涯规划范文:打造自己的运动帝国
2014/09/12 职场文书
批评与自我批评发言稿
2014/10/15 职场文书
蜗居观后感
2015/06/11 职场文书
numpy数据类型dtype转换实现
2021/04/24 Python