懶加載，是對網(wǎng)頁瀏覽時的優(yōu)化蝌戒，提升網(wǎng)頁的加載速度串塑，增加用戶的體驗(yàn)友好度。像淘寶北苟、京東這些大型商城首頁桩匪，圖片內(nèi)容都非常多，如果一次性就加載完友鼻，肯定會花費(fèi)很多時間傻昙，增加用戶的等待時間。懶加載的原理就是未進(jìn)入屏幕的盒模型不加載數(shù)據(jù)桃移，用統(tǒng)一的一張圖片來替代屋匕，等到用戶屏幕移入后，再將獲取數(shù)據(jù)借杰。
原理圖：
懶加載.jpg
這是模仿當(dāng)當(dāng)網(wǎng)寫的頁面。
加載數(shù)據(jù)只在瀏覽頁面時發(fā)生一次进泼，所以必須要給每個盒子加個開關(guān)蔗衡，當(dāng)數(shù)據(jù)加載時，這個盒子就false乳绕，不加載绞惦。
下面先放效果圖：
懶加載效果.gif
在獲取數(shù)據(jù)時，是來至于不同的接口洋措，如果給每個盒子單獨(dú)寫一個事件济蝉，肯定會造成代碼冗余铺根，也增加了工作。
最后想到給每個獲取數(shù)據(jù)的ajax單獨(dú)封裝函數(shù)惋鸥。
在js中际起，所有的.(點(diǎn))都可以寫成[]
this.getdata.guesslike()
所以這個函數(shù)可以寫成這用;
this.getdata[guesslike]()
而[]中，我們可以寫入變量雁乡。
最后就成了這樣：
this.getdata[id]();
函數(shù)名跟盒模型的id名是相同的第喳，在滾動過程中，當(dāng)屏幕進(jìn)入相應(yīng)的盒模型時踱稍，就會執(zhí)行相對應(yīng)的函數(shù)曲饱，獲取數(shù)據(jù)，同時再將盒子顯示就行珠月。
var bstop=[];
for(var i=0;i<oBox.size();i++){//添加開關(guān)
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){//循環(huán)每個盒子,獲取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扩淀，即函數(shù)名;
if(bstop[i]){
that.getdata[id](i);//當(dāng)盒模型進(jìn)入屏幕時，執(zhí)行相應(yīng)的函數(shù);
bstop[i]=false;//只獲取一次數(shù)據(jù)
}
}
})
})
