好资源导航 » 文章资讯 » JS图片懒加载的优点及实现原理

JS图片懒加载的优点及实现原理

2023-08-03 07:57:06 63

这篇文章主要介绍了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部分

js部分

window.onload=()=>{
//获取某节点与浏览器顶部的距离
functiongetTop(e){
if(!e)return
returne.offsetTop
}
letimgs=document.getElementsByTagName('img')
functionlazyLoading(imgs){
//可是区域高度
letinnerHeight=window.innerHeight;
//滚动区域高度
letscrollTop=document.documentElement.scrollTop||document.body.scrollTop;
for(leti=0;igetTop(imgs[i])){
imgs[i].src=imgs[i].getAttribute('data-src')
}
}
}
lazyLoading(imgs)
window.onscroll=()=>{
lazyLoading(imgs)
}
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
514930285
czq8825@qq.com

JS图片懒加载的优点及实现原理

热门推荐

随机推荐