图片懒加载的getBoundClientRect() Bug

来源：互联网发布：什么是数据库营销编辑：程序博客网时间：2024/05/18 08:41

最新自己做项目的时候有用到图片懒加载，我的思路是在视口滚动到图片上方一定距离时加载图片，于是采用了 getBoundClientRect 函数来获取图片的视口坐标，可是在实现过程中发现了一点小问题。

在没有加载图片的情况下获取 getBoundClientRect 的值是获取不到的，得到的对象返回值中所有的属性均为 0， img0的src并没有被赋值

这样的情况该如何去处理呢？因为图片懒加载的地方图片的宽高大致是固定的，如果高度不固定，可以采用瀑布流的做法，这里简单说一下固定时的处理办法，就是给图片加一个 span 标签，display: inline-block 之后设置他的宽高和图片大小差不多，用 span 标签先把位置占好，这样可以实时获取到 span 标签的 getBoundClientRect 值，从而动态加载图片 ——-2017/8/16

阅读全文

1 0