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