深入学习之图片延迟加载
//图片延迟加载原理:
//刚开始加载页面的时候,为了保证页面的打开速度和进行资源的优化,我们真实项目中对于第二屏及以后的图片都先不进行加载,只是给一张默认图
//只有当滚动条滑到指定区域的时候(我们的图片完全出现在了我们的视野区 或者 一露头的时候)我们在加载真实的图片
//分析步骤:
//我们最重要的就是计算完全出现的条件:
//浏览器底边框此时距离body的上偏移=当前浏览器卷去的高度(scrollTop)+浏览器可视窗口的高度(clientHeight)
//图片底边框距离body的上偏移=图片所在盒子距离body的上偏移+盒子本身的高度(offsetHeight)
//条件:浏览器底边框此时距离body的上偏移>=图片底边框距离body的上偏移
//条件成立的话我们加载真实的图片