图片懒加载
在页面需要加载的图片很多的情况下，如果一次将所有的图片全部加载出来，会耗很长的时间，实际的页面呈现效果肯定不会很理想，所以我们就等到图片滚动到视口内后，再去对图片进行加载。
懒加载思路：将页面里所有img属性src属性用data-xx代替，当页面滚动直至此图片出现在可视区域时，用js取到该图片的data-xx的值赋给src。
我们这时候首先遇到一个问题，怎么去判断图片是不是进入了视口呢？于是，JS取各种高度的方法就派上用场了。
网页可见区域宽： document.body.clientWidth;
网页可见区域高： document.body.clientHeight;
网页可见区域宽： document.body.offsetWidth (包括边线的宽);
网页可见区域高： document.body.offsetHeight (包括边线的宽);
网页正文全文宽： document.body.scrollWidth;
网页正文全文高： document.body.scrollHeight;
网页被卷去的高： document.body.scrollTop;
网页被卷去的左： document.body.scrollLeft;
网页正文部分上： window.screenTop;
网页正文部分左： window.screenLeft;
屏幕分辨率的高： window.screen.height;
屏幕分辨率的宽： window.screen.width;
屏幕可用工作区高度： window.screen.availHeight;
除了这些难记的属性之外，还要考虑各个浏览器的兼容问题，就拿网页被卷上去的高来举例
IE6/7/8/9/10：
对于没有doctype声明的页面里可以使用 document.body.scrollTop 来获取 scrollTop高度 ；
对于有doctype声明的页面则可以使用 document.documentElement.scrollTop ；
Safari:
safari 比较特别，有自己获取scrollTop的函数 ： window.pageYOffse t；
Firefox:
直接用 document.documentElement.scrollTop ；
所以，兼容性的写法就该是：
var srcollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
有了这些知识，一个图片懒加载的代码就可以写了，先假定文档结构如下：
<body>
<ul id="mainContent">
<li><img data-src="./lazyloadimgs/0_1.png" alt="" /></li>
<li><img data-src="./lazyloadimgs/0_2.png" alt="" /></li>
<li><img data-src="./lazyloadimgs/0_3.png" alt="" /></li>
<li><img data-src="./lazyloadimgs/mao.jpg" alt="" /></li>
<li><img data-src="./lazyloadimgs/0_4.png" alt="" /></li>
<li><img data-src="./lazyloadimgs/0_5.png" alt="" /></li>
<li><img data-src="./lazyloadimgs/mao.jpg" alt="" /></li>
<li><img data-src="./lazyloadimgs/0_6.png" alt="" /></li>
</ul>
</body>
<style>
#mainContent li{float:left;margin:15px 32px;border:1px solid #333;padding:4px;}
#mainContent li img{width:300px;height:350px;}
</style>
接下来就是我们加载图片的代码了，思路就是上面所说的，当图片进入视口后，从图片的data-src中取值，然后赋给src属性，完成图片的加载。
<script>
function showImg(){
var content = document.getElementById("mainContent");
var imgLen = content.children.length;
var seeHeight = document.documentElement.clientHeight; //可见区域高度
var srcollTop = document.documentElement.scrollTop||window.pageYOffset||document.body.scrollTop; //滚动条距离顶部高度
for(var i = 0;i < imgLen; i++){
var curImg = content.children[i].children[0];
if(curImg.offsetTop < seeHeight + srcollTop){
if(curImg.dataset.src != "undefined"){
curImg.setAttribute("src",curImg.dataset.src);
}
}
}
}
showImg();
window.onscroll = showImg();
</script>
这里onscroll被触发了好多次，我们不妨用一下之前有篇文章提到的函数节流。修改上面代码中的一处：
window.onscroll = throttle(showImg, 2000);
这差不多就是一个带函数节流的图片懒加载的解决方法了。
