引言
最近突然看到了有关图片懒加载的问题，大致意思就是初始状态下页面只加载浏览器可视区域的图片，剩余图片在当浏览器可视区域滚动到其位置时才开始加载。貌似现在许多大型网站都有实现懒加载，所以我便就此问题思考了一下。首先第一个问题是浏览器没有相关的 API 方法可以检测某个元素是否在可视区域，那么就只能我们人工计算，所以这里就涉及到了元素长宽，滚动条位置的知识。本文涉及的到的知识有元素长宽 clientWidth/offsetWidth/scrollWidth 的区别、以及 clientTop/offsetTop/scrollTop 的区别，并给了获取元素坐标的源代码。
一、 clientWidth、offsetWidth、scrollWidth 的区别
通常大家获取元素的长宽的时候都会使用一些框架封装好的方法，比如 jQuery.prototype.width() ，这些框架使用起来方便快捷，不过其中涉及到的知识还是非常多的，关于元素的长宽，有多种的获取方法，其代表的实际意义也是不同的。
简单来说可以使用下列公式：
clientWidth = width(可视区) + padding
