懒加载的简单实现

1.什么是懒加载

懒加载也就是延迟加载，当使用或者需要的时候才进行的加载操作，这样来避免无谓的开销。说白了就是拖延症，不想一次性把活做完，非要拖到最后一刻才去做。

2.如何实现lazyLoad

lazyload的关键点在如何在适当的时候加载用户需要的浏览器可视区域的资源，因此我们需要知道几点信息来确定目标是否存在在可视区域内,其中包括：

（1）屏幕滚动的高度 var scrollH = $(window).scrollTop();

（2）浏览器的高度  var winH = $(window).height();

（3）图片距离浏览器最顶部的高度var imgH = $(目标元素).offset().top

isSee:function($el){

//返回true则说明元素在可视区域内返回false则不在可视范围内

    var scrollH = $(window).scrollTop();

          winH = $(window).height();

          imgH = $el.offset().top

    return winH+scrollH>imgH;

},

之后就是当目标出现的时候执行我们需要的加载处理程序

$(window).on('scroll',function(){

_this.checkImg();

});

checkImg:function(){

var _this = this;

_this.$container.each(function(){

var $cur = $(this);

if (_this.isSee($cur)) {

$el.attr('src',$el.attr('data-src'));

};

})

},

这样一个简单的懒加载就实现了

3.实现懒加载的去重以及去除多次滚动重复加载的问题

防止用户不停滚动不停的调用加载程序就是实现当用户不再滚动之后再进行加载，这样我们就需要对浏览器的滚动做一个监听

$(window).on('scroll',function(){

// //当不再滚动的时候再执行加载程序

timer && clearTimeout(timer);

timer = setTimeout(function(){

_this.checkImg();

},100);

});

当然这也只是简单的实现的用户停止滚动再加载程序，当再次滚动到已经加载过的可视区域时还是会重复加载，这时我们就需要对已经加载过的元素进行标记来确定已经加载过就不再重复加载

//添加data-load属性来确定图片是否被加载过 加载则不会重新加载

if (_this.isSee($cur) && !_this.isLoaded($cur)) {

_this.showImg($cur);

$cur.attr('data-load','true');

};

//判断图片是否已经加载

isLoaded:function($el){

   if ($el.attr('data-load')) {

    return true;

   }else{

    return false;

}

以上就是简单的懒加载的过程了  当然还有更多需要注意和改进的地方  欢迎来战！！！