最近突然看到了有关图片懒加载的问题，大致意思就是初始状态下页面只加载浏览器可视区域的图片，剩余图片在当浏览器可视区域滚动到其位置时才开始加载。貌似现在许多大型网站都有实现懒加载，所以我便就此问题思考了一下。首先第一个问题是浏览器没有相关的 API 方法可以检测某个元素是否在可视区域，那么就只能我们人工计算，所以这里就涉及到了元素长宽，滚动条位置的知识。本文涉及的到的知识有元素长宽 clientWidth/offsetWidth/scrollWidth 的区别、以及 clientTop/offsetTop/scrollTop 的区别，并给了获取元素坐标的源代码。
一、 clientWidth、offsetWidth、scrollWidth 的区别通常大家获取元素的长宽的时候都会使用一些框架封装好的方法，比如 jQuery.prototype.width() ，这些框架使用起来方便快捷，不过其中涉及到的知识还是非常多的，关于元素的长宽，有多种的获取方法，其代表的实际意义也是不同的。
简单来说可以使用下列公式：
clientWidth = width(可视区) + padding
offsetWidth = width(可视区) + padding + border
scrollWidth = width(内容区)
假设有我们以下一个元素：
1 #test{
2 width: 100px;
3 height: 100px;
4 margin: 10px;
5 border: 10px solid #293482;
6 padding: 10px;
7 background-color: yellow;
8 overflow: auto;
9 }
clientWidth offsetWidth scrollWidth
以上 DEMO 是常规情况下的区别，下面加上一个滚动条我们们再来观察以下：
clientWidth offsetWidth scrollWidth
注意这里不包括滚动条的长度
这里实际上相当于内容的宽度
二、clientTop、offsetTop、scrollTop 的区别
我们使用以下公式：
clientTop = border
offsetTop = 元素边框外围至父元素边框内围
scrollTop = 元素可视区域顶部至实际内容区域的顶部
给定以下两个元素 container 和 test
1 #container{
2 background-color: #F08D8D;
3 padding: 10px;
4 }
5 #test{
6 position: relative;
7 top: 10px;
8 width: 100px;
9 height: 100px;
10 margin: 20px;
11 border: 15px solid #293482;
12 padding: 10px;
13 background-color: yellow;
14 }