基于盒模型的懒加载

懒加载，是对网页浏览时的优化，提升网页的加载速度，增加用户的体验友好度。像淘宝、京东这些大型商城首页，图片内容都非常多，如果一次性就加载完，肯定会花费很多时间，增加用户的等待时间。懒加载的原理就是未进入屏幕的盒模型不加载数据，用统一的一张图片来替代，等到用户屏幕移入后，再将获取数据。

原理图：

懒加载.jpg

这是模仿当当网写的页面。
加载数据只在浏览页面时发生一次，所以必须要给每个盒子加个开关，当数据加载时，这个盒子就false，不加载。

下面先放效果图：

懒加载效果.gif

在获取数据时，是来至于不同的接口，如果给每个盒子单独写一个事件，肯定会造成代码冗余，也增加了工作。
最后想到给每个获取数据的ajax单独封装函数。
在js中，所有的.(点)都可以写成[]

 this.getdata.guesslike()

所以这个函数可以写成这用;

 this.getdata[guesslike]()

而[]中，我们可以写入变量。
最后就成了这样：

this.getdata[id]();

函数名跟盒模型的id名是相同的，在滚动过程中，当屏幕进入相应的盒模型时，就会执行相对应的函数，获取数据，同时再将盒子显示就行。

var bstop=[];
for(var i=0;i<oBox.size();i++){//添加开关
    oBox.eq(i).attr('inx',i);
    bstop[i]=true;
}
//$(window).scrollTop+box.height()>=box.offset().top>=$(window).scrollTop;
$(window).on('scroll load',function(){//滚轮事件
    var mintop=$(window).scrollTop()+$(window).height();
    oBox.each(function(i){//循环每个盒子,获取top值;
        var maxtop=oBox.eq(i).offset().top+oBox.height();
        if(oBox.eq(i).offset().top<=mintop && $(window).scrollTop()<=maxtop){
            var id=oBox.eq(i).parent().attr('id');//获取id，即函数名;
            if(bstop[i]){
                that.getdata[id](i);//当盒模型进入屏幕时，执行相应的函数;
                bstop[i]=false;//只获取一次数据
            }
        }
    })
})