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 相关文章推荐
解放web程序员的输入验证
Oct 06 Javascript
javascript+mapbar实现地图定位
Apr 09 Javascript
JavaScript 放大镜 放大倍率和视窗尺寸
May 09 Javascript
jquery及原生js获取select下拉框选中的值示例
Oct 25 Javascript
javascript转换静态图片,增加粒子动画效果
May 28 Javascript
分享jQuery插件的学习笔记
Jan 14 Javascript
在AngularJS中如何使用谷歌地图把当前位置显示出来
Jan 25 Javascript
JavaScript File API文件上传预览
Feb 02 Javascript
vue2 中如何实现动态表单增删改查实例
Jun 09 Javascript
js实现日期显示的一些操作(实例讲解)
Jul 27 Javascript
javascript按顺序加载运行js方法
Dec 01 Javascript
微信小程序中的列表切换功能实例代码详解
Jun 09 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 $_ENV为空的原因分析
2009/06/01 PHP
PHP中获取时间的下一周下个月的方法
2014/03/18 PHP
自制PHP框架之模型与数据库
2017/05/07 PHP
PHP中in_array的隐式转换的解决方法
2018/03/06 PHP
各浏览器对click方法的支持差异小结
2011/07/31 Javascript
JavaScript数值数组排序示例分享
2014/05/27 Javascript
JavaScript设计模式之代理模式介绍
2014/12/28 Javascript
nodejs爬虫抓取数据之编码问题
2015/07/03 NodeJs
常用jQuery代码分享
2015/07/14 Javascript
jQuery实现仿百度帖吧头部固定导航效果
2015/08/07 Javascript
详解JavaScript对象和数组
2015/12/03 Javascript
javascript求日期差的方法
2016/03/02 Javascript
Node.js程序中的本地文件操作用法小结
2016/03/06 Javascript
创建一个类Person的简单实例
2016/05/17 Javascript
关于JS中setTimeout()无法调用带参函数问题的解决方法
2016/06/21 Javascript
ES6使用let命令更简单的实现块级作用域实例分析
2017/03/31 Javascript
Angular 4.X开发实践中的踩坑小结
2017/07/04 Javascript
通过示例彻底搞懂js闭包
2017/08/10 Javascript
Layui table 组件的使用之初始化加载数据、数据刷新表格、传参数
2017/09/11 Javascript
关于Vue组件库开发详析
2018/07/01 Javascript
jQuery实现动态加载(按需加载)javascript文件的方法分析
2019/05/31 jQuery
JavaScript静态作用域和动态作用域实例详解
2019/06/17 Javascript
JavaScript获取页面元素的常用方法详解
2019/09/28 Javascript
Python基于checksum计算文件是否相同的方法
2015/07/09 Python
Python_LDA实现方法详解
2017/10/25 Python
Python反射用法实例简析
2017/12/22 Python
Python安装tar.gz格式文件方法详解
2020/01/19 Python
在echarts中图例legend和坐标系grid实现左右布局实例
2020/05/16 Python
饮料业务员岗位职责
2013/12/15 职场文书
社区包粽子活动方案
2014/01/21 职场文书
2014年关于两会精神的心得体会
2014/03/17 职场文书
婚庆答谢词大全
2015/09/29 职场文书
幼儿园2016年感恩节活动总结
2016/04/01 职场文书
妇联2016年六一国际儿童节活动总结
2016/04/06 职场文书
导游词之岳阳楼
2019/09/25 职场文书
微信小程序实现拍照和相册选取图片
2021/05/09 Javascript