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 相关文章推荐
基于jquery的鼠标拖动效果代码
May 30 Javascript
Knockoutjs快速入门(经典)
Dec 24 Javascript
jQuery学习笔记之jQuery构建函数的7种方法
Jun 03 Javascript
JQuery 实现在同一页面锚点链接之间的平滑滚动
Oct 29 Javascript
Jquery ui datepicker设置日期范围,如只能隔3天【实现代码】
May 04 Javascript
数据结构中的各种排序方法小结(JS实现)
Jul 23 Javascript
JS 根据子网掩码,网关计算出所有IP地址范围示例
Apr 23 Javascript
jQuery实现一个简单的轮播图
Feb 19 Javascript
jQuery简单实现向列表动态添加新元素的方法示例
Dec 25 jQuery
vue观察模式浅析
Sep 25 Javascript
JS实现简单移动端鼠标拖拽
Jul 23 Javascript
一文带你理解vue创建一个后台管理系统流程(Vue+Element)
May 18 Vue.js
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
多重?l件?合查?(二)
2006/10/09 PHP
php下正则来匹配dede模板标签的代码
2010/08/21 PHP
php对mongodb的扩展(初出茅庐)
2012/11/11 PHP
thinkPHP商城公告功能开发问题分析
2016/12/01 PHP
bindParam和bindValue的区别以及在Yii2中的使用详解
2018/03/12 PHP
Laravel5.5 手动分页和自定义分页样式的简单实现
2019/10/15 PHP
php使用redis的几种常见操作方式和用法示例
2020/02/20 PHP
js 关键词高亮(根据ID/tag高亮关键字)案例介绍
2013/01/21 Javascript
使用JavaScript实现Java的List功能(实例讲解)
2013/11/07 Javascript
javascript定义变量时带var与不带var的区别分析
2015/01/12 Javascript
scrollWidth,clientWidth,offsetWidth的区别
2015/01/13 Javascript
javascript中使用new与不使用实例化对象的区别
2015/06/22 Javascript
js点击文本框后才加载验证码实例代码
2015/10/20 Javascript
jQuery拖动元素并对元素进行重新排序
2015/12/30 Javascript
jquery实现的判断倒计时是否结束代码
2016/02/05 Javascript
jQuery Validate验证表单时多个name相同的元素只验证第一个的解决方法
2016/12/24 Javascript
Jquery根据浏览器窗口改变调整大小的方法
2017/02/07 Javascript
Bootstrap modal 多弹窗之叠加显示不出弹窗问题的解决方案
2017/02/23 Javascript
浅谈Vue的加载顺序探讨
2017/10/25 Javascript
Angular中使用MathJax遇到的一些问题
2017/12/15 Javascript
React.js绑定this的5种方法(小结)
2018/06/05 Javascript
JS对象属性的检测与获取操作实例分析
2020/03/17 Javascript
Tornado服务器中绑定域名、虚拟主机的方法
2014/08/22 Python
Python实现监控程序执行时间并将其写入日志的方法
2015/06/30 Python
python numpy格式化打印的实例
2018/05/14 Python
在python中获取div的文本内容并和想定结果进行对比详解
2019/01/02 Python
python实现随机漫步方法和原理
2019/06/10 Python
windows下Pycharm安装opencv的多种方法
2020/03/05 Python
基于python图书馆管理系统设计实例详解
2020/08/05 Python
2019史上最全Database工程师题库
2015/12/06 面试题
施工班组长岗位职责
2014/01/05 职场文书
自我鉴定书
2014/03/24 职场文书
小学开学典礼新闻稿
2015/07/17 职场文书
bootstrapv4轮播图去除两侧阴影及线框的方法
2022/02/15 HTML / CSS
Java生成日期时间存入Mysql数据库的实现方法
2022/03/03 Java/Android
MySQL分布式恢复进阶
2022/07/23 MySQL