//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")

  

h5列表页的性能优化的更多相关文章

  1. 移动端h5列表页上拉加载更多

    背景 上星期公司要求做一个回收书籍的h5给安卓用,里面有一个功能是回收记录列表.设计师那边出的稿子是没有要求分页或者是上拉刷新的,但是众所周知,列表页数据很多的情况下,h5加载是很慢的.所以我一开始是 ...

  2. dede列表页分页地址优化(不同url相同内容问题解决)<转自http://www.966266.com>

    <注明,完全转自http://www.966266.com/seoblog/?p=75> 存在问题 DEDE默认分类分页地址存在不同URL相同内容问题,导致内容重复,对SEO非常不利.情况 ...

  3. h5移动端前端性能优化

    1.脚本优化 (1)减少重绘和回流 (2)缓存Dom选择与计算 (3)缓存列表length (4)尽量使用事件代码,避免批量绑定事件 (5)尽量使用ID选择器 (6)使用touchstart.touc ...

  4. 移动H5前端性能优化指南

    移动H5前端性能优化指南 概述 1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首屏加载3秒完成或使用Loading4. 基于联通3G网 ...

  5. H5 缓存机制浅析 移动端 Web 加载性能优化

    腾讯Bugly特约作者:贺辉超 1 H5 缓存机制介绍 H5,即 HTML5,是新一代的 HTML 标准,加入很多新的特性.离线存储(也可称为缓存机制)是其中一个非常重要的特性.H5 引入的离线存储, ...

  6. 移动H5前端性能优化指南(转载)

    移动H5前端性能优化指南 概述 1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首屏加载3秒完成或使用Loading4. 基于联通3G网 ...

  7. [转] 钉钉的H5性能优化方案

    对于一个H5的产品,功能无疑很重要,但是性能同样是用户体验中不可或缺的一环.原本H5的渲染性能就不及native的app,如果不把性能优化做起来,将极大地影响用户使用产品的积极性. 用户感受 当用户能 ...

  8. 移动H5前端性能优化指南[转]

    移动H5前端性能优化指南 米随随2015.01.23 移动H5前端性能优化指南 概述 1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首 ...

  9. 移动 H5(PC Web)前端性能优化指南

    原文地址https://zhuanlan.zhihu.com/p/25176904?utm_source=wechat_session&utm_medium=social&utm_me ...

随机推荐

  1. 24、Linux 多线程压缩工具pigz 的学习

    转载: https://blog.csdn.net/q871761987/article/details/72230355 https://blog.csdn.net/woodcorpse/artic ...

  2. Installing XGBoost on Mac OSX

      0. Get gcc with open mp.  Just paste and execute the following command in your terminal, once Home ...

  3. Sql语句摘要

    1.分批更新数据库 declare @x intset @x=1 while(@x<=51) begin begin tran update UserFavorite set UserFavor ...

  4. memcpy用法

    函数原型 void *memcpy(void*dest, const void *src, size_t n); 功能 由src指向地址为起始地址的连续n个字节的数据复制到以destin指向地址为起始 ...

  5. java代码实现顺序队列

    java实现顺序队列 package xianxinTable; import java.util.ArrayList; import java.util.Iterator; import com.s ...

  6. js作用域解析原理

    当代码进入到<script>标签或者在调用一个方法,那么就会进入作用域,在解析代码的时候就会做以下两件事情: ①去找var 和function关键字进行js预解析如果有var把值全部定义成 ...

  7. arp欺骗进行流量截获-1

    这边博文主要讲一下怎么使用arp欺骗进行流量截获,主要用于已经攻入内网以后,进行流量监听以及修改. 一.什么是arp     arp协议是以太网的基础工作协议,其主要作用是是一种将IP地址转化成物理地 ...

  8. OO 抽象类与接口的区别

    抽象类与接口的区别 抽象类与接口的区别 一.抽象类:(抽象类适用于同一系列,并且有需要继承的成员) 概念: 1.使用abstract修饰: 2.抽象类中可以包含抽象方法: 3.抽象类只能被子类继承:( ...

  9. 十四、JS同步异步知识点,重点(Node.js-fs模块补充篇)

    (本片文章如果你能耐着性子看我,保证会对同步和异步有一个非常深刻的理解) JavaScript是单线程执行,所谓的单线程呢就是指如果有多个任务就必须去排队,前面任务执行完成后,后面任务再执行.因为Ja ...

  10. 新增扩展程序功能打包提交新版 WARNING ITMS-90473 警告问题

    1.问题描述 自从在主应用中加入SiriShortCut功能之后,打包程序上传至 iTunes Connect 就会出现警告,看其原因描述是CFBundleVersion主应用与子应用的不一致导致的 ...