//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. k阶原点距和k阶中心距各是说明什么数字特征

    k阶原点距和k阶中心距各是说明什么数字特征 二阶中心距,也叫作方差,它告诉我们一个随机变量在它均值附近波动的大小,方差越大,波动性越大.方差也相当于机械运动中以重心为转轴的转动惯量.(The mome ...

  2. 21. Date 函数

    SQL 日期 当我们处理日期时,最难的任务恐怕是确保所插入的日期的格式,与数据库中日期列的格式相匹配. 只要数据包含的只是日期部分,运行查询就不会出问题.但是,如果涉及时间,情况就有点复杂了. 在讨论 ...

  3. VirtualBox安装增强功能(Linux)

    我们在安装之前,必须得先安装好它所需要的依赖包,不然安装过程必定会出现错误! 一.安装依赖包 #yum install kernel-headers #yum install kernel-devel ...

  4. 人脸识别 人工智能(AI)

    .. 如何通过AI实现 用我自己的数据集:能识别几张人脸.能否判断相似度.能否认出.

  5. LibreOJ 6000 搭配飞行员(最大流)

    题解:最基础的最大流,按照主飞行员与起点建边,副飞行员与终点建边,可以同坐的主副飞行员之间建边,值均为一,然后跑一边最大流就完美了! 代码如下: #include<queue> #incl ...

  6. 个人项目:wc程序(java)

    Github项目地址:https://github.com/jat0824/wc.git 项目相关要求 wc.exe 是一个常见的工具,它能统计文本文件的字符数.单词数和行数.这个项目要求写一个命令行 ...

  7. delphi7和XE下 获取路径

    XE里没有Application.Exename所以用paramstr(0); Str:=ParamStr(0); //自己全路径c:\555\qq.exe,可用于控制台Str:=ExpandFile ...

  8. [.net 多线程]Monitor

    Monitor 类通过向单个线程授予对象锁来控制对对象的访问.对象锁提供限制访问代码块(通常称为临界区)的能力.当一个线程拥有对象的锁时,其他任何线程都不能获取该锁.还可以使用 Monitor 来确保 ...

  9. 「POJ 2699」The Maximum Number of Strong Kings

    题目链接 戳我 \(Describe\) 一场联赛可以表示成一个完全图,点表示参赛选手,任意两点u, v之间有且仅有一条有向边\((u, v)\)或\((v, u)\),表示\(u\)打败\(v\)或 ...

  10. docker--基本命令

    仅做学习参考,可能有误 part1:启动docker服务 在Windows上使用MySQL时候,有时无法直接使用MySQL -uroot -p 来进入MySQL,这是因为我们没有启动会MySQL服务此 ...