懒加载是个老生常谈的话题了，无非就是页面太长了，流量很可贵，首屏时间很可贵，所以要节约啊。之前一直在用js的盒子模型算来算去的，说真的，那几个什么offsetTop啊什么clientHeight什么乱七八糟的，于我的短期记忆力不相匹配，所以我从来就没有记住过，每次都得查文档，自己画一画。
说起来也是有意思，最近找工作，没想到能得到阿里的面试机会，不说基本上过不了这事儿吧，面试随机问到的几个题目倒是蛮有意思。恩，社招的题目是很不固定的，面试官的知识储备量有多大你根本摸不到底。问到的其中一个问题就是懒加载的方法。我给的加来加去的方法以及判断图片是否被加载过了的方法，面试官并没有说不对，只不过觉得，太笨了吧。（捂脸，一直都说我的方法太笨了我也很绝望啊）
说回懒加载，要判断某图片是否出现在视口，应该加载，其实并不太需要使用那么一大堆莫名其妙的计算。Element.getBoundingClientRect()这个API应该是很好用的。可惜好像并不是那么主流，大部分方法介绍都并没有说到这个API。
Element.getBoundingClientRect
这个方法能直接返回你要判断的div距离视口左上角的位置，并且这个方法，连低至IE4都可以支持呢。（MDN上可以查到）
这个方法可以返回6个值，上下左右以及宽高。上下左右是这个div包括border宽度距离视口左方和上方的值，宽高也是包含border的。所以呢，使用onscroll方法的话，就可以计算出这个元素是不是在视口中啦！是不是很方便！！！再也不用记一堆值啦！只要知道clientHeight就可以啦！！！！
用onscroll的时候记得要节流哦，要不然很耗性能哒！虽然还有其他方法可以做，但是这篇文章就先介绍一下这个本来已经很老的，却不常用的方法吧。
撒花。
撒个p啊！面试又没有答出来！！！！！！/(ㄒoㄒ)/~~
网友评论