源码地址：github ：https://github.com/zbxd001/lazyLoad
更多技术博客：https://www.yuque.com/dipingxianzhiguang/gxiez5/kacktt
一、实现过程
1、使用的算法
懒加载，一张图片就是一个<img>标签，浏览器是否发起请求图片是根据<img>的src属性，所以实现懒加载的关键就是，在图片没有进入可视区域时，先不给<img>的src赋值，这样浏览器就不会发送请求了，等到图片进入可视区域再给src赋值。
2、思路及其实现
加载loading图片
先在html里将所有图片设置加载前图片src属性和加载后属性data-src
判断那些图片需要加载
图片距离顶部的距离大于可视区域和滚动区域之和是懒加载，让在浏览器可视区域的图片显示，可视区域外的不显示，所以当图片距离顶部的距离top-height等于可视区域h和滚动区域高度s之和时说明图片马上就要进入可视区了，就是说当top-height<=s+h时，图片在可视区。
隐形加载图片
实际的图片隐藏，不会显示到页面上去
替换真图片
获取自定义属性data-src，用真图片替换假图片
二、效果图
不同网速下的不同加载
懒加载效果
slow 3G
fast 3G
online
标签：src,浏览器,可视,区域,加载,图片 来源： https://blog.csdn.net/weixin_44579911/article/details/121479396
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。