共计 5042 个字符，预计需要花费 13 分钟才能阅读完成。
一、转载内容
首先转载两篇文章 JS 中 height、clientHeight、scrollHeight、offsetHeight 区别关于 scrollTop,offsetTop,scrollLeft,offsetLeft 用法介绍
二、clientHeight 和 offsetHeight
页面 body 的 clientWidth 和 height 是不加 border 的值，要包括 padding 的值
页面 body 的 offsetWidth 和 height 是加 border 的值，要包括 padding 的值
举个例子在页面控制台输入 document.body.clientHeight 和 document.body.offsetHeight
发现两者数值相同，因为 body 没有加 border。当我给 body 加上 10px 的 border，clientHeight 就少了 20px
二、元素滚动高度
当一个元素的内容多，高度超出他所在的容器高度，会出现滚动条
1、element.scrollHeight 元素滚动内容的总长度
element.scrollHeight 元素滚动内容的总长度。如果元素没出现滚动条，scrollHeight 等于 clientHeight
2、element.scrollTop 滚动的高度元素滚动的距离
3、window.innerHeight 窗口的高度
三、图片懒加载
我只想写一点笔记，方便自己记忆，这篇文章干货较少。如果想学习懒加载的朋友，建议直接观看这篇文章实现图片懒加载 (Lazyload)，这篇文章写得很好，
懒加载主要是使用于图片比较多的情况，一次性加载所有的图片会给服务器比较大的压力，加载比较慢，所以我们先不加载未出现在页面可视区域内的图片，等到滚动到可视区域后再去加载。这样子对于页面加载性能上会有很大的提升，也提高了用户体验。
懒加载主要有 3 个步骤：1、把所有图片的 src 值换成另外一张图片的 src 值，把真正的 src 值放在 data-src 内 2、判断元素是否从下方出现在可区域，$(node).offset().top<=$(window).height() + $(window).scrollTop() 滚动时 offset 的值，offset().top 为元素距离页面内容的高度
3、把图片 data-src 换成 src 值
<!DOCTYPE html>
<html>
<head>
<script src=”//code.jquery.com/jquery-1.9.1.min.js”></script>
<meta charset=”utf-8″>
<title>JS Bin</title>
<style>
.container {
max-width: 800px;
margin: 0 auto;
}
.container:after{
content: ”;
display: block;
clear: both;
}
.container img {
float: left;
width: 50%;
}
h1{
clear: both;
}
/* 因为 img 都是浮动，如果不清除浮动，h1 的值高度就相当于 container 里面最高的，不是实际的数值 */
</style>
</head>
<body>
<div class=”container”>
<img src=”http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif” alt=”1″ data-src=”http://cdn.jirengu.com/book.jirengu.com/img/1.jpg”>
<img src=”http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif” alt=”2″ data-src=”http://cdn.jirengu.com/book.jirengu.com/img/2.jpg”>
<img src=”http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif” alt=”3″ data-src=”http://cdn.jirengu.com/book.jirengu.com/img/3.jpg”>
<img src=”http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif” alt=”4″ data-src=”http://cdn.jirengu.com/book.jirengu.com/img/4.jpg”>
<img src=”http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif” alt=”5″ data-src=”http://cdn.jirengu.com/book.jirengu.com/img/5.jpg”>
<img src=”http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif” alt=”6″ data-src=”http://cdn.jirengu.com/book.jirengu.com/img/6.jpg”>
<img src=”http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif” alt=”7″ data-src=”http://cdn.jirengu.com/book.jirengu.com/img/7.jpg”>
<img src=”http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif” alt=”8″ data-src=”http://cdn.jirengu.com/book.jirengu.com/img/8.jpg”>
<img src=”http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif” alt=”9″ data-src=”http://cdn.jirengu.com/book.jirengu.com/img/9.jpg”>
<img src=”http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif” alt=”10″ data-src=”http://cdn.jirengu.com/book.jirengu.com/img/10.jpg”>
<img src=”http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif” alt=”11″ data-src=”http://cdn.jirengu.com/book.jirengu.com/img/11.jpg”>
<img src=”http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif” alt=”12″ data-src=”http://cdn.jirengu.com/book.jirengu.com/img/12.jpg”>
<img src=”http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif” alt=”13″ data-src=”http://cdn.jirengu.com/book.jirengu.com/img/13.jpg”>
<img src=”http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif” alt=”14″ data-src=”http://cdn.jirengu.com/book.jirengu.com/img/14.jpg”>
<h1 id=”target”>hello</h1>
<img src=”http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif” alt=”15″ data-src=”http://cdn.jirengu.com/book.jirengu.com/img/15.jpg”>
<img src=”http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif” alt=”16″ data-src=”http://cdn.jirengu.com/book.jirengu.com/img/16.jpg”>
<img src=”http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif” alt=”17″ data-src=”http://cdn.jirengu.com/book.jirengu.com/img/17.jpg”>
<img src=”http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif” alt=”18″ data-src=”http://cdn.jirengu.com/book.jirengu.com/img/18.jpg”>
<img src=”http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif” alt=”19″ data-src=”http://cdn.jirengu.com/book.jirengu.com/img/19.jpg”>
<img src=”http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif” alt=”20″ data-src=”http://cdn.jirengu.com/book.jirengu.com/img/20.jpg”>
</div>
<script>
start()
/* 一开始没有滚动，也需要触发一次 */
$(window).on(‘scroll’, function(){
start()
})
function start(){
$(‘.container img’).not(‘[data-isLoaded]’).each(function(){
var $node = $(this)
if(isShow($node) ){
loadImg($node)
/* setTimeout(loadImg($node),300) 可以不做函数节流，懒加载本来就是为了提高响应速度的 */
}
})
}
function isShow($node){
return $node.offset().top <= $(window).height() + $(window).scrollTop()
}
function loadImg($img){
$img.attr(‘src’, $img.attr(‘data-src’))
$img.attr(‘data-isLoaded’, 1)
/* 用于区别图片是否被加载过，防止重新加载 */
}
</script>
</body>
</html>
执行结果
