懒加载肿么做——getBoundingClientRect

懒加载是个老生常谈的话题了,无非就是页面太长了,流量很可贵,首屏时间很可贵,所以要节约啊。之前一直在用js的盒子模型算来算去的,说真的,那几个什么offsetTop啊什么clientHeight什么乱七八糟的,于我的短期记忆力不相匹配,所以我从来就没有记住过,每次都得查文档,自己画一画。
说起来也是有意思,最近找工作,没想到能得到阿里的面试机会,不说基本上过不了这事儿吧,面试随机问到的几个题目倒是蛮有意思。恩,社招的题目是很不固定的,面试官的知识储备量有多大你根本摸不到底。问到的其中一个问题就是懒加载的方法。我给的加来加去的方法以及判断图片是否被加载过了的方法,面试官并没有说不对,只不过觉得,太笨了吧。(捂脸,一直都说我的方法太笨了我也很绝望啊)
说回懒加载,要判断某图片是否出现在视口,应该加载,其实并不太需要使用那么一大堆莫名其妙的计算。Element.getBoundingClientRect()这个API应该是很好用的。可惜好像并不是那么主流,大部分方法介绍都并没有说到这个API。

Element.getBoundingClientRect

这个方法能直接返回你要判断的div距离视口左上角的位置,并且这个方法,连低至IE4都可以支持呢。(MDN上可以查到)

这个方法可以返回6个值,上下左右以及宽高。上下左右是这个div包括border宽度距离视口左方和上方的值,宽高也是包含border的。所以呢,使用onscroll方法的话,就可以计算出这个元素是不是在视口中啦!是不是很方便!!!再也不用记一堆值啦!只要知道clientHeight就可以啦!!!!
用onscroll的时候记得要节流哦,要不然很耗性能哒!虽然还有其他方法可以做,但是这篇文章就先介绍一下这个本来已经很老的,却不常用的方法吧。
撒花。

撒个p啊!面试又没有答出来!!!!!!/(ㄒoㄒ)/~~
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 174,676评论 25 709
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,865评论 1 92
  • 常量和变量 1,建议先定义常量let,如果需要修改在修改成变量var(更加安全)2,let是指向的对象不可以仔修改...
    Never_Yg阅读 331评论 0 0
  • ( from http://coolshell.cn/articles/2753.html ) A good pr...
    peterSZW阅读 339评论 0 0
  • a标签的伪类选择器 a标签的伪类选择器是专门用来修改a标签不同状态下的样式的 格式::link 修改从未被访问过状...
    Strive_12c4阅读 425评论 0 0