图片懒加载其实并不难！

<img src="default.png" class="lazyload"/>

注意：img在初始化的时候，如果你没有设置默认图片，那就不要设置src属性，因为即使设置 src='' 浏览器也会尝试加载图片。 接下来，我们来看看js：

首先，我们要添加滚动监听事件

window.onscroll = function() {   
  var sTop = document.body.scrollTop || document.documentElement.scrollTop;   
  _loadImage(sTop);
}

当触发滚动事件时，调用_loadImage()方法，这里传入一个当前滚动条位置作为参数。

function _loadImage(sTop) {   
  var imgList = document.querySelectorAll(".lazyload");  
  for (var i = 0; i < imgList.length; i++) {  
   var el = imgList[i];   
   if (_isToShow(el, sTop)) {   
    var imgUrl = el.getAttribute("data-src");   
    el.setAttribute("src", imgUrl);   
    el.className = el.className.replace("lazyload", "");   
   }   
  };  
}

到这里，我们已经拿到了所有需要懒加载的img，但是，我们还需要去判断哪些是当前需要加载的，所以，_isToShow()函数就是关键了。

function _isToShow(el, sTop) {   
 var coords = el.getBoundingClientRect();   
 var wHeight = window.innerHeight || document.documentElement.clientHeight;   
 return (coords.top >= 0 && coords.left >= 0 && coords.top <= wHeight);   
}

getBoundingClientRect()

这个方法返回一个矩形对象，包含四个属性：left、top、right和bottom。分别表示元素各边与浏览器上边和左边的距离。

上面就是整个懒加载的过程，不过，要注意一点，因为我们刚加载页面进来时，是不会触发滚动监听的，所以，我们要初始化，用来加载图片。

var sTop = document.body.scrollTop || document.documentElement.scrollTop;   
_loadImage(sTop);

图片懒加载就是这么简单，当然，这有可能不是最好的方法，后续会继续优化！