当我们打开一个页面时，浏览器就会从上往下读取页面中的<img>标签src中的地址，并且开启线程来进行加载。

倘若用户的网速不给力或者此页面中的图片太多时，就会发生每张图片都加载了一点但是都没有加载完成，导致最后没有一个图片能正常显示。一方面让用户的体验非常之差，试问谁会一直耐心的等待着页面的加载？另一方面，加载每个图片都要向服务器发送请求，这回增大服务器的压力。

针对这种情况，就需要运用懒加载技术：先只加载可视窗口区域的图片，当用户向下拖动滚动条时再继续加载后面的图片（也是只加载目前可视窗口区域内的图片）。1.这样减少了加载时的线程数量，使可视区域内的图片恩能够快速加载，优化了用户体验。2.减少了同一时间发向服务器的请求数，服务器压力剧减。

那么我们是如何进行懒加载的呢？

我所使用的方法：在写网页<img>标签时并不回将图片的路径放入src属性。而是自定义一个其他的属性eg：_src。将路径放入这个自定义的属性中。那么在加载页面时，这个图片一开始是无法加载的。而当浏览器的可视区域移动到此图片上时，将_src中的路径赋值给src属性，并开始加载。

代码如下：

function getFixed(obj){
　　//获取非行间属性
　　function getStyle(obj,styleName){
　　　　if (obj.currentStyle){
　　　　　　return obj.currentStyle[styleName];
　　　　}
　　　　else{
　　　　　　return getComputedStyle(obj,null)[styleName];
　　　　}
　　}
　　//要获取图片相对网页顶部的距离，但图片有被定位的父级
　　var iLeft=0;
　　var iTop=0;
　　var oParent=obj;
　　while(oParent){
　　　　if (oParent.tagName=="HTML"){
　　　　　　break;
　　　　}
　　　　iLeft+=oParent.offsetLeft;
　　　　iTop+=oParent.offsetTop;
　　　　if (oParent!=obj){
　　　　　　iLeft+=parseInt(getStyle(oParent,"borderWidth"));//offsetLeft不包括边框，因此要把边框加上
　　　　　　iTop+=parseInt(getStyle(oParent,"borderWidth"));
　　　　}
　　　　oParent=oParent.offsetParent;
　　}
　　return [iLeft,iTop];//当 break 后itop就是图片相对网页顶部的距离
}
window.onload=window.onscroll=function (){

　　var aImg=document.getElementsByTagName("img");

　　var bodyScrollTop=document.body.scrollTop||document.documentElement.scrollTop;
　　var scrollBottom=bodyScrollTop+document.documentElement.clientHeight;
　　for (var i=0; i<aImg.length; i++){
　　　　if (getFixed(aImg[i])[1]<=scrollBottom){//此时说明这图片已经在可视区域内，应该开始加载了
　　　　　　aImg[i].src=http://www.mamicode.com/aImg[i].getAttribute("_src");
　　　　}
　　}
}

js懒加载