位置: IT常识 - 正文

【前端】图片懒加载的原理和三种实现方式(前端image)

编辑:rootadmin
【前端】图片懒加载的原理和三种实现方式 一. 图片懒加载的目的

推荐整理分享【前端】图片懒加载的原理和三种实现方式(前端image),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:前端图片库,前端图片模糊的原因,前端图片库,前端实现图片编辑,前端实现图片编辑,前端图片展示,前端图片库,前端图片展示,内容如对您有帮助,希望把文章链接给更多的朋友!

大型网站如常用的淘宝,京东等页面,需要展示大量的商品图片信息,如果打开网页时让所有图片一次性加载完成,需要处理很多次网络请求,等待加载时间比较长,用户体验感很差。

有一种常用的解决方式是:随着滚动动态加载,即图片的惰性加载。视图之外的图片默认不加载,随着页面的滚动,图片进入了显示的范围,则触发图片的加载显示。

优点:页面加载速度快,用户体验感更好且节省流量

二. 图片懒加载的原理方法

初始化时,图片标签的src不能是真实的图片地址,也不可以是空地址或者坏地址(会出现图片加载失败的图标)。

初始化的时候,可以设置图片的src是某一个小型图片。例如一张1px*1px的透明图片。由于所有图片都使用这一张图片,只会发送一次请求,不会增加性能负担。将图片的真实路径绑定给一个自定义属性,例如data-url。注意:页面的img元素,如果没有src属性,浏览器就不会发出请求去下载图片<img data-url="xxx" src="1px.gif" width="100" height="100"/>定义滚动事件,判断元素进入视口,则将src替换为真正的url地址。利用js提取data-url的真实图片地址赋值给src属性三. 图片懒加载的实现方法

图片懒加载的关键在于获取元素的位置,并判断其是否出现在视口。故有以下三种方式

滚动监听+scrollTop+offsetTop+innerHeight滚动监听+getBoundingClientRect()intersectionObserve()3.1 滚动监听+scrollTop+offsetTop+innerHeight

scrollTop:指网页元素被滚动条卷去的部分。

offsetTop:元素相对父元素的位置

innerHeight:当前浏览器窗口的大小。需要注意兼容性问题。

IE8及更早版本以前没有提供取得浏览器窗口大小的属性,不过提供了API:document.documentElement.clientHeight/clientWidth:返回元素内容及其内边距所占据的空间大小。IE6中,上述属性必须在标准模式才有效,如果是混杂模式,需要通过document.body.clientWidth 和 document.body. clientHeight 取得相同信息。var pageWidth = window.innerWidthvar pageHeight = window.innerHeight; if (typeof pageWidth != "number"){ //pageWidth的值不是数值,说明没有innerwidth属性 if (document.compatMode == "CSS1Compat"){ //标准模式 pageWidth = document.documentElement.clientWidth; pageHeight = document.documentElement.clientHeight; } else { //混杂模式 pageWidth = document.body.clientWidth; pageHeight = document.body.clientHeight; } }三个属性之间的关系如图所示,故当scrollTop+innerHeight > offsetTop,即图片在视口内,否则图片在可视区域外。 代码实现

滚动监听完成图片懒加载的简易版本

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } img { margin-top:400px; width: 250px; display: block; } </style></head><body> <img src="img/1pxImg.png" data-url="img/1.jpg"> <img src="img/1pxImg.png" data-url="img/2.jpg"> <img src="img/1pxImg.png" data-url="img/3.jpg"> <img src="img/1pxImg.png" data-url="img/4.jpg"> <img src="img/1pxImg.png" data-url="img/5.jpg"> <script> var imgs = document.getElementsByTagName('img') scrollFn() // 监听滚动事件 window.onscroll = scrollFn function scrollFn() { var clietH = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop; console.log(clietH, scrollTop); Array.from(imgs).forEach((item) =>{ let eleTop = item.offsetTop // console.log(eleTop) let count = scrollTop + clietH - eleTop console.log(count) // 可设置为>100 查看懒加载效果 if (count > 0) { //从data-url中取出真实的图片地址赋值给scr item.setAttribute('src', item.getAttribute('data-url')) } }) } </script></body></html>3.2 滚动监听+getBoundingClientRect()getBoundingClientRect()【前端】图片懒加载的原理和三种实现方式(前端image)

Element.getBoundingClientRect() 方法返回元素的大小及其相对于视口的位置。返回一个对象,对象属性包括top,right

rectObject = object.getBoundingClientRect();

API返回一个对象,即rectObject为一个对象,其包含以下属性

rectObject.top:元素上边到视窗上边的距离;rectObject.right:元素右边到视窗左边的距离;rectObject.bottom:元素下边到视窗上边的距离;rectObject.left:元素左边到视窗左边的距离;rectObject.width:元素自身的宽度rectObject.height:元素自身的高度

故当rectObject.top的值处于0-视口高度,则元素处于可视区。即getBoundingClientRect(ele).top >= 0 && getBoundingClientRect(ele).top <= offsetHeight代码实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } img { margin-top:400px; width: 250px; display: block; } </style></head><body> <img src="img/1pxImg.png" data-url="img/1.jpg"> <img src="img/1pxImg.png" data-url="img/2.jpg"> <img src="img/1pxImg.png" data-url="img/3.jpg"> <img src="img/1pxImg.png" data-url="img/4.jpg"> <img src="img/1pxImg.png" data-url="img/5.jpg"> <script> var imgs = document.getElementsByTagName('img') scrollFn() // 监听滚动事件 window.onscroll = scrollFn function scrollFn() { var clietH = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; Array.from(imgs).forEach((item) =>{ let ele = item.getBoundingClientRect() console.log(clietH,ele.top) // 可以设置为ele.top+200 查看懒加载效果 if (ele.top > 0 && ele.top < clietH) { //从data-url中取出真实的图片地址赋值给scr item.setAttribute('src', item.getAttribute('data-url')) } }) } </script></body></html>3.3 intersectionObserve()intersectionObserve()

新的API,针对元素的可见时间进行监听。由于可见(visible)的本质是,目标元素与视口产生一个交叉区,所以这个 API 叫做"交叉观察器"。

var io = new IntersectionObserver(callback, option);

IntersectionObserver是浏览器原生提供的构造函数,接受两个参数:callback是可见性变化时的回调函数,option是配置对象(该参数可选)。

构造函数的返回值是一个观察器实例。实例的observe方法可以指定观察哪个 DOM 节点。

// 开始观察io.observe(document.getElementById('example'));// 停止观察io.unobserve(element);// 关闭观察器io.disconnect();

上面代码中,observe的参数是一个 DOM 节点对象。如果要观察多个节点,就要多次调用这个方法。

io.observe(elementA);io.observe(elementB);callack参数

目标元素的可见性变化时,就会调用观察器的回调函数callback。

一般会触发两次:1.目标元素刚刚进入视口(开始可见),2.完全离开视口(开始不可见)。

callback函数的参数是一个数组,每个成员都是一个IntersectionObserverEntry对象。

IntersectionObserverEntry 对象

提供目标元素的信息,一共有六个属性。

time:可见性发生变化的时间,是一个高精度时间戳,单位为毫秒target:被观察的目标元素,是一个 DOM 节点对象rootBounds:根元素的矩形区域的信息,getBoundingClientRect()方法的返回值,如果没有根元素(即直接相对于视口滚动),则返回nullboundingClientRect:目标元素的矩形区域的信息intersectionRect:目标元素与视口(或根元素)的交叉区域的信息intersectionRatio:目标元素的可见比例,即intersectionRect占boundingClientRect的比例,完全可见时为1,完全不可见时小于等于0

所以可以通过判断intersectionRatio属性是否处于(0,1)来判断元素的可见性

代码实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } img { margin-top:400px; width: 250px; display: block; } </style></head><body> <img src="img/1pxImg.png" data-url="img/1.jpg"> <img src="img/1pxImg.png" data-url="img/2.jpg"> <img src="img/1pxImg.png" data-url="img/3.jpg"> <img src="img/1pxImg.png" data-url="img/4.jpg"> <img src="img/1pxImg.png" data-url="img/5.jpg"> <script> var imgs = document.getElementsByTagName('img') // 观察器实例 let io = new IntersectionObserver((entires) =>{ entires.forEach(item => { // 原图片元素 let oImg = item.target if (item.intersectionRatio > 0 && item.intersectionRatio <= 1) { oImg.setAttribute('src', oImg.getAttribute('data-url')) } }) }) // 给每一个图片设置观察器 Array.from(imgs).forEach(element => { io.observe(element) }); </script></body></html>

备注:本文章为学习前端知识过程中的记录和分享,如有错误欢迎指正!

本文链接地址:https://www.jiuchutong.com/zhishi/300304.html 转载请保留说明!

上一篇:网络安全工具大合集(网络安全工具大全图片)

下一篇:计算机视觉项目-实时目标追踪(计算机视觉项目队友只让你打标签是什么意思)

  • 简析利用微博推广APP的方法(简析利用微博推广的意义)

    简析利用微博推广APP的方法(简析利用微博推广的意义)

  • ios14有更新息屏显示功能吗(ios14.5自动息屏)

    ios14有更新息屏显示功能吗(ios14.5自动息屏)

  • 华为人脸识别禁用多久可以用(华为人脸识别禁用是什么意思)

    华为人脸识别禁用多久可以用(华为人脸识别禁用是什么意思)

  • oppoa53m怎么录屏(oppoa53怎样录制屏幕)

    oppoa53m怎么录屏(oppoa53怎样录制屏幕)

  • 苹果手机电池鼓包把屏幕顶起来了(苹果手机电池鼓起来了怎么办)

    苹果手机电池鼓包把屏幕顶起来了(苹果手机电池鼓起来了怎么办)

  • 淘宝违规怎么恢复健康(淘宝违规怎么恢复正常)

    淘宝违规怎么恢复健康(淘宝违规怎么恢复正常)

  • 微信自动支付腾讯会员怎么取消(微信自动支付扣款)

    微信自动支付腾讯会员怎么取消(微信自动支付扣款)

  • 启动hadoop的命令行(hadoop启动成功界面)

    启动hadoop的命令行(hadoop启动成功界面)

  • 饿了么新用户首单立减的条件(饿了么新用户首单红包为什么用不了)

    饿了么新用户首单立减的条件(饿了么新用户首单红包为什么用不了)

  • 蓝牙共享网络和热点有什么区别(蓝牙共享网络和热点)

    蓝牙共享网络和热点有什么区别(蓝牙共享网络和热点)

  • kindle充电器和安卓通用吗(kindle充电头用1a还是2a)

    kindle充电器和安卓通用吗(kindle充电头用1a还是2a)

  • 三星手机无故响提示音(三星手机莫名其妙响)

    三星手机无故响提示音(三星手机莫名其妙响)

  • 陌陌互相关注多久可以视频(陌陌互相关注多久可以语音视频)

    陌陌互相关注多久可以视频(陌陌互相关注多久可以语音视频)

  • 电脑端描述怎么写(电脑的描述)

    电脑端描述怎么写(电脑的描述)

  • 手机为什么微博文章打不开(手机为什么微博登录不了)

    手机为什么微博文章打不开(手机为什么微博登录不了)

  • 苹果ios11小白球怎么设置(苹果手机小白球消失了怎么显示出来)

    苹果ios11小白球怎么设置(苹果手机小白球消失了怎么显示出来)

  • 至强e52630相当于i几(至强e52630处理器怎么样)

    至强e52630相当于i几(至强e52630处理器怎么样)

  • 常见文字处理软件有哪些(常见文字处理软件)

    常见文字处理软件有哪些(常见文字处理软件)

  • 华为mate30pro5g和mate30pro区别(华为mate30pro5g和mate40pro)

    华为mate30pro5g和mate30pro区别(华为mate30pro5g和mate40pro)

  • 无线耳机怎么双耳配对(无线耳机怎么双耳)

    无线耳机怎么双耳配对(无线耳机怎么双耳)

  • applecare怎么换绑(apple care换绑)

    applecare怎么换绑(apple care换绑)

  • mq8g2ch a是苹果几(mq8g2ch/a是什么版本)

    mq8g2ch a是苹果几(mq8g2ch/a是什么版本)

  • 笔记本电脑复位键在哪(笔记本电脑复位键)

    笔记本电脑复位键在哪(笔记本电脑复位键)

  • Nginx同一端口部署多个前后端分离的vue项目(nginx同一个端口设置两个网站)

    Nginx同一端口部署多个前后端分离的vue项目(nginx同一个端口设置两个网站)

  • Switch Between Gnome And KDE Desktops In Ubuntu Or Kubuntu

    Switch Between Gnome And KDE Desktops In Ubuntu Or Kubuntu

  • 审计合同需要交税吗
  • 个人所得税汇算表
  • 计提的增值税
  • 总公司和分公司可以在一个城市吗
  • 什么是试算平衡?如何进行试算平衡
  • 会计软件每年都要付钱的吗
  • 合同成本在哪个科目列支
  • 半成品委托加工费计入成本还是费用
  • 预付广告费计入什么科目
  • 会计法对填制审核会计凭证有哪些规定
  • 应交增值税为什么是销项减进项
  • 长期股权投资损失的账务处理
  • 有留抵税额可以享受加计抵减吗
  • 政府补贴转给其他公司
  • 公益捐赠税前扣除凭证
  • 升级后的百旺开票系统如何操作
  • 公司股东会承担法律责任吗
  • 个税经营所得预扣预缴
  • 固定资产减值准备属于什么科目
  • 钻井采用的主要设备
  • 营业执照号码含义
  • 不计提直接发工资
  • 什么是补提或者计提
  • 工商年报社保需要多少钱
  • 收购农产品再销售最新税收政策
  • linux 如何查看网卡信息
  • 增值税中的视同销售区分为几种情况?
  • KB5004296无法安装,提示错误代码:0x800f0990的解决方法
  • 如何搭建chatGPT
  • linux grep过滤空白行
  • 黄金的伴生石
  • 奥林匹克森林公园奥海
  • laravel自带队列效率
  • 生产企业可以抵扣进项税的
  • 减免税款月末怎么结转
  • 小企业原材料
  • 代收的运输费用怎么入账
  • 申请个体工商户流程
  • 哪些发票可以抵扣?
  • 什么企业不用交残保金
  • 个人所得税孩子教育怎么申报
  • 财务报表的填写要求
  • 非财政补助结余在资产负债表中怎么填
  • 请培训老师的费用怎么处理
  • 材料暂估入库时需要考虑增值税进项税吗
  • 接待客人后的感受和过程
  • 银行汇票与商业汇票的本质不同
  • 先收票后收货
  • 企业所得税退税如何进行账务处理
  • 材料款已付,发票没来
  • 计提工资的会计账务处理
  • 什么情况下需要打狂犬疫苗
  • 本年利润的会计分录
  • 如何申请高新技术企业认定
  • mysql批量添加字段
  • sql判断字段是否包含数字和字母
  • mysql 正则表达式分组替换
  • win7端口怎么查看
  • 电脑开机一直显示windowsxp
  • 电脑svchost占用cpu很大
  • mac的dns怎么设置最快
  • win7应用程序没反应
  • linux系统的配置
  • win10系统电脑开机黑屏
  • win命令行杀死一个程序
  • win7系统电脑打开的软件闪退怎么办
  • 新买的笔记本电脑需要做什么
  • win8开始界面设置
  • android:ListView的局部刷新
  • 特征提取技术
  • python容错
  • axios使用jsonp
  • javascript中数组的方法
  • jquery easyui 教程
  • 怎么用git上传项目
  • javascript 类
  • 国家税务总局安徽省税务局公告
  • 个税申报表明细怎么打印
  • 税务uk数据怎么导出来
  • 什么是审计的重要特征,也是审计的精髓
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设