铁雪资源网 Design By www.gsvan.com
这篇文章主要介绍了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="/UploadFiles/2021-04-02/1.jpg">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) } }以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
标签：
JS,图片,懒加载
铁雪资源网 Design By www.gsvan.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
铁雪资源网 Design By www.gsvan.com
暂无JS图片懒加载的优点及实现原理的评论...
P70系列延期，华为新旗舰将在下月发布
3月20日消息，近期博主@数码闲聊站 透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。
而博主@定焦数码 爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。