本文详细介绍了图片懒加载的工作原理和技术实现细节。通过分析页面滚动过程中浏览器与图片位置的关系，来决定何时加载真实图片，从而优化用户体验并提高网页加载效率。
//图片延迟加载原理：
//刚开始加载页面的时候,为了保证页面的打开速度和进行资源的优化,我们真实项目中对于第二屏及以后的图片都先不进行加载,只是给一张默认图
//只有当滚动条滑到指定区域的时候（我们的图片完全出现在了我们的视野区 或者 一露头的时候）我们在加载真实的图片
//分析步骤：
//我们最重要的就是计算完全出现的条件:
//浏览器底边框此时距离body的上偏移=当前浏览器卷去的高度(scrollTop)+浏览器可视窗口的高度(clientHeight)
//图片底边框距离body的上偏移=图片所在盒子距离body的上偏移+盒子本身的高度(offsetHeight)
//条件:浏览器底边框此时距离body的上偏移>=图片底边框距离body的上偏移
//条件成立的话我们加载真实的图片
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
