原生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 相关文章推荐
window.location.hash 属性使用说明
Mar 20 Javascript
基于jquery的finkyUI插件与Ajax实现页面数据加载功能
Dec 03 Javascript
Jquery 切换不同图片示例代码
Dec 05 Javascript
jquery实现弹出div,始终显示在屏幕正中间的简单实例
Mar 08 Javascript
Js实现动态添加删除Table行示例
Apr 14 Javascript
JavaScript设计模式之观察者模式(发布者-订阅者模式)
Sep 24 Javascript
JavaScript和CSS交互的方法汇总
Dec 02 Javascript
JS基于面向对象实现的放烟花效果
May 07 Javascript
理解javascript中Map代替循环
Feb 26 Javascript
jQuery控制frames及frame页面JS的方法
Mar 08 Javascript
JavaScript知识点总结(四)之逻辑OR运算符详解
May 31 Javascript
AngularJS实现根据不同条件显示不同控件
Apr 20 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
ueditor 1.2.6 使用方法说明
2013/07/24 PHP
PHP中preg_match正则匹配中的/u、/i、/s含义
2015/04/17 PHP
关于PHP 如何用 curl 读取 HTTP chunked 数据
2016/02/26 PHP
js实现兼容IE6与IE7的DIV高度
2010/05/13 Javascript
jQuery参数列表集合
2011/04/06 Javascript
js window对象属性和方法相关资料整理
2015/11/11 Javascript
不定义JQuery插件 不要说会JQuery
2016/03/07 Javascript
基于javascript实现最简单的选项卡切换效果
2016/05/16 Javascript
javascript的document中的动态添加标签实现方法
2016/10/24 Javascript
原生JavaScript实现AJAX、JSONP
2017/02/07 Javascript
JS中使用 after 伪类清除浮动实例
2017/03/01 Javascript
vue、react等单页面项目应该这样子部署到服务器
2018/01/03 Javascript
vue.js element-ui tree树形控件改iview的方法
2018/03/29 Javascript
详解vue中组件参数
2018/07/09 Javascript
Node.js assert断言原理与用法分析
2019/01/04 Javascript
Vue基本使用之对象提供的属性功能
2019/04/30 Javascript
转换layUI的数据表格中的日期格式方法
2019/09/19 Javascript
深入了解Vue.js 混入(mixins)
2020/07/23 Javascript
[01:55]2014DOTA2国际邀请赛 BBC正赛第一天总结
2014/07/10 DOTA
Python ZipFile模块详解
2013/11/01 Python
python 调用win32pai 操作cmd的方法
2017/05/28 Python
Python基于dom操作xml数据的方法示例
2018/05/12 Python
Python如何爬取微信公众号文章和评论(基于 Fiddler 抓包分析)
2019/06/28 Python
Python使用微信itchat接口实现查看自己微信的信息功能详解
2019/08/22 Python
OpenCV+python实现实时目标检测功能
2020/06/24 Python
CSS3 transform的skew属性值图文详解
2014/07/21 HTML / CSS
环境建设实施方案
2014/03/14 职场文书
业务员自荐信范文
2014/04/20 职场文书
教师年终个人总结
2015/02/11 职场文书
2015年全民国防教育日活动总结
2015/03/23 职场文书
聚会通知怎么写
2015/04/23 职场文书
2015年小学数学教师工作总结
2015/05/20 职场文书
贷款收入证明范本
2015/06/12 职场文书
2016年小学“我们的节日·中秋节”活动总结
2016/04/05 职场文书
idea以任意顺序debug多线程程序的具体用法
2021/08/30 Java/Android
漫改真人电影「萌系男友是燃燃的橘色」公开先导视觉图
2022/03/21 日漫