一、转载内容首先转载两篇文章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等于 clientHeight2、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>执行结果
