最新自己做项目的时候有用到图片懒加载,我的思路是在视口滚动到图片上方一定距离时加载图片,于是采用了 getBoundClientRect 函数来获取图片的视口坐标,可是在实现过程中发现了一点小问题。
在没有加载图片的情况下获取 getBoundClientRect 的值是获取不到的,得到的对象返回值中所有的属性均为 0,
这样的情况该如何去处理呢?因为图片懒加载的地方图片的宽高大致是固定的,如果高度不固定,可以采用瀑布流的做法,这里简单说一下固定时的处理办法,就是给图片加一个 span 标签,display: inline-block 之后设置他的宽高和图片大小差不多,用 span 标签先把位置占好,这样可以实时获取到 span 标签的 getBoundClientRect 值,从而动态加载图片 ——-2017/8/16