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 源码分析笔记(6) jQuery.data
Jun 08 Javascript
jquery 选项卡效果 新手代码
Jul 08 Javascript
20款效果非常棒的 jQuery 插件小结分享
Nov 18 Javascript
JS实现具备延时功能的滑动门菜单效果
Sep 17 Javascript
js基于cookie记录来宾姓名的方法
Jul 19 Javascript
webpack多入口多出口的实现方法
Aug 17 Javascript
JS实现深度优先搜索求解两点间最短路径
Jan 17 Javascript
详解jquery和vue对比
Apr 16 jQuery
javascript导出csv文件(excel)的方法示例
Aug 25 Javascript
vue 封装 Adminlte3组件的实现
Mar 18 Javascript
js根据后缀判断文件文件类型的代码
May 09 Javascript
Element实现动态表格的示例代码
Aug 02 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
ThinkPHP3.1新特性之对分组支持的改进与完善概述
2014/06/19 PHP
PHP中exec与system用法区别分析
2014/09/22 PHP
jquery 指南/入门基础
2007/11/30 Javascript
javascript 冒号 使用说明
2009/06/06 Javascript
Jquery 插件开发笔记整理
2011/01/17 Javascript
借助JavaScript脚本判断浏览器Flash Player信息的方法
2014/07/09 Javascript
jquery操作checkbox示例分享
2014/07/21 Javascript
JS中事件冒泡和事件捕获介绍
2016/12/13 Javascript
JavaScript数据结构中栈的应用之表达式求值问题详解
2017/04/11 Javascript
解决React Native端口号修改的方法
2017/07/28 Javascript
如何配置vue.config.js 处理static文件夹下的静态文件
2020/06/19 Javascript
javascript中正则表达式语法详解
2020/08/07 Javascript
[55:23]VGJ.T vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
python处理二进制数据的方法
2015/06/03 Python
详解Python的Django框架中的中间件
2015/07/24 Python
python编写简单爬虫资料汇总
2016/03/22 Python
Python实现二维有序数组查找的方法
2016/04/27 Python
python对配置文件.ini进行增删改查操作的方法示例
2017/07/28 Python
python3 pillow生成简单验证码图片的示例
2017/09/19 Python
利用python批量修改word文件名的方法示例
2017/10/17 Python
Python简单计算文件MD5值的方法示例
2018/04/11 Python
一些Centos Python 生产环境的部署命令(推荐)
2018/05/07 Python
python实时获取外部程序输出结果的方法
2019/01/12 Python
对Pycharm创建py文件时自定义头部模板的方法详解
2019/02/12 Python
Python Lambda函数使用总结详解
2019/12/11 Python
python 成功引入包但无法正常调用的解决
2020/03/09 Python
Eclipse配置python默认头过程图解
2020/04/26 Python
python右对齐的实例方法
2020/07/05 Python
CSS3实现淘宝留白的方法
2020/06/05 HTML / CSS
澳大利亚排名第一的狂热牛仔品牌:ONETEASPOON
2018/11/20 全球购物
Pretty Green美国:英式摇滚服饰风格代表品牌之一
2019/01/23 全球购物
性能测试工程师的面试题
2015/02/20 面试题
幼儿园大班新学期寄语
2014/01/18 职场文书
中国梦演讲稿范文
2014/08/28 职场文书
大学生实习证明范文(5篇)
2014/09/18 职场文书
详解mysql三值逻辑与NULL
2021/05/19 MySQL