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 相关文章推荐
IE8 下的Js错误HTML Parsing Error...
Aug 14 Javascript
JS遮罩层效果 兼容ie firefox jQuery遮罩层
Jul 26 Javascript
javascript 循环调用示例介绍
Nov 20 Javascript
基于JavaScript代码实现兼容各浏览器的设为首页和加入收藏
Jan 07 Javascript
Node.js的MongoDB驱动Mongoose基本使用教程
Mar 01 Javascript
原生JS简单实现ajax的方法示例
Nov 29 Javascript
浅析JavaScript中var that=this
Feb 17 Javascript
jQuery EasyUI window窗口使用实例代码
Dec 25 jQuery
JavaScript中的高级函数
Jan 04 Javascript
vue使用$emit时,父组件无法监听到子组件的事件实例
Feb 26 Javascript
JavaScript实现微信红包算法及问题解决方法
Apr 26 Javascript
Vue实现渲染数据后控制滚动条位置(推荐)
Dec 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 输出双引号&quot;与单引号'的方法
2010/05/09 PHP
PHP中全面阻止SQL注入式攻击分析小结
2012/01/30 PHP
PHP的curl实现get,post和cookie(实例介绍)
2013/06/17 PHP
PHP使用星号隐藏用户名,手机和邮箱的实现方法
2016/09/22 PHP
PHP结合Ffmpeg快速搭建流媒体服务的实践记录
2018/10/31 PHP
tp5.1 框架路由操作-URL生成实例分析
2020/05/26 PHP
如何简单地用YUI做JavaScript动画
2007/03/10 Javascript
利用onresize使得div可以随着屏幕大小而自适应的代码
2010/01/15 Javascript
使用隐藏的new来创建对象
2011/03/29 Javascript
鼠标滑在标题上显示图片的JS代码
2013/11/19 Javascript
JavaScript中的object转换函数toString()与valueOf()介绍
2014/12/31 Javascript
JavaScript中匿名函数用法实例
2015/03/23 Javascript
7个有用的jQuery代码片段分享
2015/05/19 Javascript
AngularJS实现路由实例
2017/02/12 Javascript
jQuery实现鼠标滑过预览图片大图效果的方法
2017/04/26 jQuery
Vue.js简易安装和快速入门(第二课)
2017/10/17 Javascript
JavaScript面试出现频繁的一些易错点整理
2018/03/29 Javascript
vue使用el-upload上传文件及Feign服务间传递文件的方法
2019/03/15 Javascript
ES6 Iterator遍历器原理,应用场景及相关常用知识拓展详解
2020/02/15 Javascript
学习python的几条建议分享
2013/02/10 Python
简单的Apache+FastCGI+Django配置指南
2015/07/22 Python
对Python中range()函数和list的比较
2018/04/19 Python
Django实现web端tailf日志文件功能及实例详解
2019/07/28 Python
部署Django到阿里云服务器教程示例
2020/06/03 Python
Pycharm的Available Packages为空的解决方法
2020/09/18 Python
Python在centos7.6上安装python3.9的详细教程(默认python版本为2.7.5)
2020/10/15 Python
俄罗斯香水和化妆品网上商店:NOTINO.ru
2019/12/17 全球购物
电子商务专业在校生实习自我鉴定
2013/09/29 职场文书
医药销售求职信范文
2014/02/01 职场文书
公益广告标语
2014/06/19 职场文书
2014年领导班子专项整治整改方案
2014/09/28 职场文书
刑事和解协议书范本
2014/11/19 职场文书
中学教师师德师风承诺书
2015/04/28 职场文书
运动会班级口号霸气押韵
2015/12/24 职场文书
Pygame Time时间控制的具体使用详解
2021/11/17 Python
golang使用map实现去除重复数组
2022/04/14 Golang