JS图片懒加载的优点及实现原理


Posted in Javascript onJanuary 10, 2020

这篇文章主要介绍了JS图片懒加载的优点及实现原理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

图片懒加载优势:

增强用户体验

  • 优化代码
  • 减少http的请求
  • 减少服务器端压力
  • 服务器的按需加载

图片懒加载原理:

先将图片的src设置为同一张图片或者不设置,同时给img标签设置一个特殊属性,例如:data-src用于存放图片的真实预览地址;若图片未进入可视区域时,展示同一张图片或者直接不展示图片,此时就不会发生http请求,当图片进入可视区域时,将data-src上的值赋给src,此时再发送http请求。

关键:判断图片是否进入到可视区域(关键函数)

  •  页可见区域宽: document.body.clientWidth;
  •  网页可见区域高: document.body.clientHeight;
  •  网页可见区域宽: document.body.offsetWidth (包括边线的宽);
  •  网页可见区域高: document.body.offsetHeight (包括边线的宽);
  •  网页正文全文宽: document.body.scrollWidth;
  •  网页正文全文高: document.body.scrollHeight;
  •  网页被卷去的高: document.body.scrollTop;
  •  网页被卷去的左: document.body.scrollLeft;
  •  网页正文部分上: window.screenTop;
  •  网页正文部分左: window.screenLeft;
  •  屏幕分辨率的高: window.screen.height;
  •  屏幕分辨率的宽: window.screen.width;
  •  屏幕可用工作区高度: window.screen.availHeight;
  •  当前元素相对于其 offsetParent 元素的顶部的距离: HTMLElement.offsetTop;
  •  浏览器窗口的视口(viewport)高度(以像素为单位): window.innerHeight; (如果有水平滚动条,也包括滚动条高度)

代码实现

html部分

<div>
  <img src="./img/1.jpg" data-src="./img/1.jpg" alt="">
  <img src="./img/1.jpg" data-src="./img/2.jpg" alt="">
  <img src="./img/1.jpg" data-src="./img/3.jpg" alt="">
  <img src="./img/1.jpg" data-src="./img/4.jpg" alt="">
  <img src="./img/1.jpg" data-src="./img/5.jpg" alt="">
  <img src="./img/1.jpg" data-src="./img/6.jpg" alt="">
  <img src="./img/1.jpg" data-src="./img/7.jpg" alt="">
  <img src="./img/1.jpg" data-src="./img/8.jpg" alt="">
  <img src="./img/1.jpg" data-src="./img/9.jpg" alt="">
  <img src="./img/1.jpg" data-src="./img/10.jpg" alt="">
 </div>

js部分

window.onload = () => {
   // 获取某节点与浏览器顶部的距离
   function getTop(e) {
    if (!e) return
    return e.offsetTop
   }
   let imgs = document.getElementsByTagName('img')
   function lazyLoading(imgs) {
    // 可是区域高度
    let innerHeight = window.innerHeight;
    // 滚动区域高度
    let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    for (let i = 0; i < imgs.length; i++) {
     // 图片距离顶部的距离大于可视区域和滚动区域之和时加载
     if (scrollTop + innerHeight > getTop(imgs[i])) {
      imgs[i].src = imgs[i].getAttribute('data-src')
     }
    }
   }
   lazyLoading(imgs)
   window.onscroll = () => {
    lazyLoading(imgs)
   }
  }

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

Javascript 相关文章推荐
Javascript客户端脚本的设计和应用
Aug 21 Javascript
javascript跑马灯悬停放大效果实现代码
Dec 12 Javascript
使用js操作cookie的一点小收获分享
Sep 03 Javascript
js中继承的几种用法总结(apply,call,prototype)
Dec 26 Javascript
jquery动态调整div大小使其宽度始终为浏览器宽度
Jun 06 Javascript
json属性名为什么要双引号(个人猜测)
Jul 31 Javascript
基于gulp合并压缩Seajs模块的方式说明
Jun 14 Javascript
ExtJs整合Echarts的示例代码
Feb 27 Javascript
js数组去重的N种方法(小结)
Jun 07 Javascript
微信小程序实现上传图片裁剪图片过程解析
Aug 22 Javascript
Layui tree 下拉菜单树的实例代码
Sep 21 Javascript
ant-design-vue 快速避坑指南(推荐)
Jan 21 Javascript
jQuery操作元素的内容和样式完整实例分析
Jan 10 #jQuery
jquery选择器和属性对象的操作实例分析
Jan 10 #jQuery
js实现旋转木马轮播图效果
Jan 10 #Javascript
微信小程序新闻网站详情页实例代码
Jan 10 #Javascript
如何在Node和浏览器控制台中打印彩色文字
Jan 09 #Javascript
JavaScript复制变量三种方法实例详解
Jan 09 #Javascript
js实现左右轮播图
Jan 09 #Javascript
You might like
PHP实现的多彩标签效果代码分享
2014/08/21 PHP
详解WordPress中用于合成数组的wp_parse_args()函数
2015/12/18 PHP
转换json格式的日期为Javascript对象的函数
2010/07/13 Javascript
Javascript倒计时代码
2010/08/12 Javascript
jQuery前台数据获取实现代码
2011/03/16 Javascript
JavaScript 学习笔记之一jQuery写法图片等比缩放以及预加载
2012/06/28 Javascript
利用JS进行图片的切换即特效展示图片
2013/12/03 Javascript
动态的创建一个元素createElement及删除一个元素
2014/01/24 Javascript
node.js中的console.trace方法使用说明
2014/12/09 Javascript
jQuery中通过ajax调用webservice传递数组参数的问题实例详解
2016/05/20 Javascript
Angularjs实现分页和分页算法的示例代码
2016/12/23 Javascript
js中的触发事件对象event.srcElement与event.target详解
2017/03/15 Javascript
微信小程序request出现400的问题解决办法
2017/05/23 Javascript
浅谈vue项目重构技术要点和总结
2018/01/23 Javascript
nodejs更改项目端口号的方法
2018/05/13 NodeJs
JavaScript运行机制实例分析
2020/04/11 Javascript
Vue router传递参数并解决刷新页面参数丢失问题
2020/12/02 Vue.js
python实现数组插入新元素的方法
2015/05/22 Python
详解用python自制微信机器人,定时发送天气预报
2019/03/25 Python
Python实现EXCEL表格的排序功能示例
2019/06/25 Python
Python实现直播推流效果
2019/11/26 Python
Python Scrapy框架:通用爬虫之CrawlSpider用法简单示例
2020/04/11 Python
Python闭包与装饰器原理及实例解析
2020/04/30 Python
孤独星球出版物:Lonely Planet Publications
2018/03/17 全球购物
美国高级音响品牌:Master&Dynamic
2018/07/05 全球购物
财务会计专业应届毕业生求职信
2013/10/18 职场文书
分公司经理岗位职责
2013/11/11 职场文书
文秘专业应届生求职信
2014/05/26 职场文书
人力资源管理专业求职信
2014/07/23 职场文书
写给女朋友的保证书
2015/05/09 职场文书
铁人纪念馆观后感
2015/06/16 职场文书
2016年教师新年寄语
2015/08/18 职场文书
2016读书月活动心得体会
2016/01/14 职场文书
django 认证类配置实现
2021/11/11 Python
Winsows11性能如何? win11性能测评多核竟比Win10差了10%
2021/11/21 数码科技
SQL Server中的逻辑函数介绍
2022/05/25 SQL Server