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初学者需要了解10个小技巧
Aug 25 Javascript
jqeury eval将字符串转换json的方法
Jan 20 Javascript
javascript开发技术大全 第4章 直接量与字符集
Jul 03 Javascript
jQuery模拟超链接点击效果代码
Apr 21 Javascript
js读取被点击次数的简单实例(从数据库中读取)
Mar 07 Javascript
15款jQuery分布引导插件分享
Feb 04 Javascript
js仿淘宝和百度文库的评分功能
May 15 Javascript
实现JavaScript高性能的数据存储
Dec 11 Javascript
Javascript中字符串相关常用的使用方法总结
Mar 13 Javascript
Vuejs在v-for中,利用index来对第一项添加class的方法
Mar 03 Javascript
vue draggable resizable 实现可拖拽缩放的组件功能
Jul 15 Javascript
如何在JavaScript中正确处理变量
Dec 25 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输出指定时间以前时间格式的方法
2015/03/21 PHP
WordPress中使主题支持小工具以及添加插件启用函数
2015/12/22 PHP
PHP中如何防止外部恶意提交调用ajax接口
2016/04/11 PHP
php实现将HTML页面转换成word并且保存的方法
2016/10/14 PHP
Thinkphp5行为使用方法汇总
2017/12/21 PHP
ThinkPHP5.0 图片上传生成缩略图实例代码说明
2018/06/20 PHP
PHP+Ajax实现的检测用户名功能简单示例
2019/02/12 PHP
smarty模板的使用方法实例分析
2019/09/18 PHP
引用外部js乱码问题分析及解决方案
2013/04/12 Javascript
初识SmartJS - AOP三剑客
2014/06/08 Javascript
抛弃Nginx使用nodejs做反向代理服务器
2014/07/17 NodeJs
JavaScript分页功能的实现方法
2015/04/25 Javascript
利用JavaScript脚本实现滚屏效果的方法
2015/07/07 Javascript
JavaScript的React Web库的理念剖析及基础上手指南
2016/05/10 Javascript
JavaScript结合Bootstrap仿微信后台多图文界面管理
2016/07/22 Javascript
xtemplate node.js 的使用方法实例解析
2016/08/22 Javascript
ES6扩展运算符的用途实例详解
2017/08/20 Javascript
Vue中v-show添加表达式的问题(判断是否显示)
2018/03/26 Javascript
JavaScript门道之标准库
2018/05/26 Javascript
详解小程序input框失焦事件在提交事件前的处理
2019/05/05 Javascript
JavaScript基础之this和箭头函数详析
2019/09/05 Javascript
基于Vue+ElementUI的省市区地址选择通用组件
2019/11/20 Javascript
通过Kettle自定义jar包供javascript使用
2020/01/29 Javascript
代码块高亮可复制显示js插件highlight.js+clipboard.js整合
2021/02/15 Javascript
[06:40]2014DOTA2西雅图国际邀请赛 DK战队巡礼
2014/07/07 DOTA
Python字符串处理之count()方法的使用
2015/05/18 Python
从列表或字典创建Pandas的DataFrame对象的方法
2019/07/06 Python
在Pytorch中计算自己模型的FLOPs方式
2019/12/30 Python
回馈慈善的设计师太阳镜:DIFF eyewear
2019/10/17 全球购物
银行优秀员工事迹
2014/02/06 职场文书
亮剑精神演讲稿
2014/05/23 职场文书
学校火灾防控方案
2014/06/09 职场文书
教师节学生演讲稿
2014/09/03 职场文书
村干部四风问题整改措施
2014/09/30 职场文书
使用tensorflow 实现反向传播求导
2021/05/26 Python
日本十大血腥动漫,那些被禁播的动漫盘点
2022/03/21 日漫