h5列表页的性能优化
//0.还原状态 caoke.loading=false $(".loadbtn").text("点击加载更多") //1 还没有任何数据的情况 if(data.object.list.length==0){ //是否是第一页 if(data1.pageNo==1){ caoke.noneData1++ } caoke.nextPage() }else{ //2.有数据的情况 if(caoke.index==2&&data1.pageNo==1){ $('<div class="tips-info soon-info"><span class="soon-info-text">你还可以看看以下即将出租的房屋</span></div>').appendTo(".data-list") } //解析数据 caoke.domReady=false setTimeout(function(){ caoke.domReady=true $(window).trigger("scroll") },data.object.list.length*400) for(var i=0;i<data.object.list.length;i++){ var item=data.object.list[i]; item.index=caoke.index var html=$.parseTpl(caoke.tpl1, { "item":item, numParams:numParams }) caoke.render(html,"bottom") } //3 数据不够的时候 if(data.object.list.length<data1.pageSize){ //4是否是第一页 if(data1.pageNo==1&&caoke.index==2){ caoke.endnoneshow=true } caoke.nextPage() } data1.pageNo++ } error:function(){ $(".loadbtn").text("点击加载更多") //5加载完成,改变状态 caoke.loading=false }
上面是处理数据的几种情况
下面是列表性能优化的函数,判断是否在可视区域,不在可视区域的dom隐藏,这样就不占渲染内存
//滚动加载都是先从缓存里面加载,当没有缓存的时候,ajax加载 var topCache= [],bottomCache=[] var windowheight=$(window).height() var prevtop= 0,direct=1 var num=0 function autodd(e){ var scrollTop=$("body")[0].scrollTop if(Math.abs(scrollTop-prevtop)>100){ if(scrollTop>prevtop){ direct=1 }else{ direct=-1 } prevtop=scrollTop var curArr=[] caoke.midpArr.forEach(function(item,index){ if(Math.abs(item-(windowheight/2+scrollTop))<2*windowheight){ curArr.push(index) } // if(direct==1){ // if( item<2*windowheight+scrollTop&&item>scrollTop){ // curArr.push(index) // } // }else{ // if(scrollTop+windowheight-item>0&&scrollTop-item<windowheight){ // curArr.push(index) // } // } }) // //console.log(curArr) var prevNum=0 curArr.forEach(function(item){ prevNum+=item }) if(prevNum!=caoke.prevNum){ caoke.prevNum=prevNum if(direct==1){ for(var ki=0;ki<curArr[0];ki++){ if(topCache.indexOf(ki)==-1){ topCache.push(ki) caoke.domArr[ki].hide() } } }else{ for(var ki2=curArr[curArr.length-1]+1;ki2< caoke.domArr.length;ki2++){ if(bottomCache.indexOf(ki2)==-1){ bottomCache.push(ki2) caoke.domArr[ki2].hide() } } } curArr.forEach(function(item){ if(topCache.indexOf(item)>-1){ topCache.splice(topCache.indexOf(item),1) caoke.domArr[item].show() } if(bottomCache.indexOf(item)>-1){ bottomCache.splice(bottomCache.indexOf(item),1) caoke.domArr[item].show() } }) } } } caoke.domReady=true $(window).on("touchstart touchmove scroll",function(e) { if(!caoke.domReady){ return } //下滚动加载 if(!caoke.loading){ var scrollTop = $("body")[0].scrollTop var documentheight = $(document).height() if (scrollTop + windowheight + 200 >= documentheight) { caoke.loading=true caoke.addJsonp() //console.log("加载数据") } } autodd() }) $(".loadbtn").on("click",function(){ if(!caoke.loading||$(this).text()=="点击加载更多"){ caoke.loading=true caoke.addJsonp() //console.log("加载数据") } }) $(".loadbtn").trigger("click")