zoukankan      html  css  js  c++  java
  • 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")
    

      

  • 相关阅读:
    软件是否有必要进行性能测试
    电子工业出版社博文视点在上海第六届UPA中国用户可用性大会上
    一站式学习 Linux C语言编程
    免费讲座:从草根到巨人——互联网时代的LAMP开源架构
    相忘于江湖,《监控》 来自热心读者simon
    博文视点大讲堂第18期:从草根到巨人——互联网时代的LAMP开源架构
    博文视点Open Party第8期
    都是过客,相煎何急?
    每个人心中都有一片极乐净土
    CSS单位和CSS默认值大全
  • 原文地址:https://www.cnblogs.com/caoke/p/5109419.html
Copyright © 2011-2022 走看看