ajax页面预加载

每天有时间休息的时候我们总是打开qq空间看看亲朋好友的说说等，一直都发现qq有一个用户体验比较好的功能也是刚出现不久的技术吧，其他的博客等也用到该技术了它就是：页面向下滚动ajax自动加载内容。原本想自己写一个的但下午特别困头也晕就放弃了，就在网上搜索相关资源在本地跑一下成功后分享给大家，文章出自：http://www.daimajiayuan.com/sitejs-18608-1.html 我只是稍微修改了他的样式代码；

首先，让我们造一些假数据：新建page.php

<?php

if(!empty($_POST["pagesize"]) && !empty($_POST["pagenumber"])){

$array_news=array();

$array_news[]='委员建议尽快推行延迟退休：70岁身体还很好';

$array_news[]='养老保险并轨存万亿成本缺口或占用企业养老金';

$array_news[]='河南人大内务司法委员会主任桑金科今晨跳楼身亡';

$array_news[]='解放军人事调动频现武警部队司令政委双换人';

$array_news[]='山西省吕梁政法委书记李良森被调查';

$array_news[]='社科院报告：90后大学毕业生将成“不买房一代”';

$array_news[]='特斯拉盈利困难小米做纯电动车是明智的选择吗？';

$array_news[]='2015年电商趋势预测：单价高频次低的行业迎来风口';

$array_news[]='国际财经头条:法国失业者近350万人创历史新高';

$array_news[]='科技大事件:2015年PlayStation游戏服务登录三星TV';

$array_news[]='全球要闻速递:印分裂势力制造暴力袭击已致76人死亡';

$array_news[]='河南豆腐渣高速路遭曝光：裂缝约1米深一拳宽(图)';

$array_news[]='网曝12306大量用户数据泄露含身份证及密码信息';

$array_news[]='xxx案法官复查聂树斌案：案子已经顶天了';

$array_news[]='亿元存款离奇蒸发中国银行：受害储户“还有更多”';

$array_news[]='厅官周建华落马前与市委书记矛盾公开:我死他也死';

$array_news[]='美媒“探秘”朝鲜互联网现状：网站被“精挑细选”';

$array_news[]='江西一在押嫌犯猝死生前曾收公安“威胁”短信';

$array_news[]='日媒：一日本男子持有20斤哈哈在华被判处死刑';

$array_news[]='江西萍乡村民要求保留落马官员别墅设反腐教育基地';

$array_news[]='国内部分富豪退订私人飞机 “赵本山失语”成诱因';

$array_news[]='英国“留学签证毕业即失效” 美国学生:学费贵还排外';

$array_news[]='男子重逢26年未联系初恋情人女方为其怀孕生女';

$array_news[]='南京：12个苹果售价5888元超过一部iPhone6（图）';

$array_news[]='香港运钞车现金散落被市民捡走损失1523万港元';

$array_news[]='地铁乞丐被拍照后打骂乘客行乞男童喊“打死你”';

$array_news[]='海蛇生吞海鳗如跳舞男女洗澡煤气中毒双亡';

$array_news[]='实拍女子当街“遛”男人帝企鹅极寒中抱团守护幼崽';

$array_news[]='安徽男女车中烧成焦炭被抬出时姿势奇怪';

$array_news[]='马戏团松狮被染成熊猫女子胸部藏毒被识破';

$array_news[]='苏州独墅湖举行圣诞夜荧光跑活动';

$array_news[]='苏州交行吴中经济技术开发区成功阻截冒名挂失';

$array_news[]='“买车收租”骗数亿资金逃至土耳其遭全球通缉';

$array_news[]='苏州人“消寒”招数不少(图)';

$array_news[]='金鸡湖畔五洲风情中法艺术交流展“远物内像”';

$array_news[]='苏州84岁老太掉河中众邻居生死营救';

$array_news[]='天使投资入省库机构、项目、金额数苏州列全省第一';

$array_news[]='常熟南三环地面互通开通苏州常熟往来更便捷';

$array_news[]='“老古董”何以摇身变“时髦品”?';

$array_news[]='教育信息技术应用培训全覆盖书智慧教育新篇章';

$array_news[]='张家港“加冕”国家知识产权示范城市';

$array_news[]='苏州校园纠纷赔偿超万元不得私了';

$array_news[]='相城纪检微博八成原创拥有6000多名粉丝';

$array_news[]='苏州社保十大实事有哪些请您来票选';

$array_news[]='前航空高管：美军击落MH370 疑其将发动恐怖袭击';

$array_news[]='中国暗中一直在偷偷保护的五个国家曝光';

$array_news[]='美国绞杀朝鲜逼华投降北京反击太狠';

$array_news[]='北京新机场26日开工建设规模或成全国第二';

$array_news[]='外媒：中国国产航母单价30亿美元歼31将上舰';

$array_news[]='美国：坠毁约旦战机并非由“伊斯兰国”击落';

$array_news[]='美日俄都震惊日本潜艇跟踪辽宁舰神秘失踪';

$array_news[]='中央一号为何再三敦促解放军全面备战';

$array_news[]='俄9月担任上合轮值狗屎国关注阿富汗恐怖主义';

$array_news[]='俄审查MH17坠机事件证人称掌握乌军机参与证据';

$array_news[]='英防务公司获12亿美元订单制造美军装甲车(图)';

$array_news[]='日媒：印度向蒙古提供防务援助对抗中国影响力';

$array_news[]='01美国称中国黑客攻击阿富汗搜美军撤军情报';

$array_news[]='02中国第2艘航母下水时间被张召忠证实';

$array_news[]='03中国掐住日本软肋全世界都不打算放过安倍';

$array_news[]='04中国一个省富可敌国看你的省能打败哪国';

$array_news[]='05为啥中国在南海打越南这么狠这就是真相';

$array_news[]='中国最新大型无人机首度曝光进行跑道测试';

$array_news[]='不敢想象：中朝边境发生令人爆汗的事';

$array_news[]='北京回应钓鱼岛建基地：日本人得知后脸色大变';

$array_news[]='美媒：中国若拉拢古巴将驻军北美威胁美安全';

$array_news[]='中国完胜美日：泰国总理访华签定巨额订单！';

$array_news[]='解放军歼-20战机一大改动战力猛增美日倍感不安';

$array_news[]='2015春晚节目单曝光劣迹艺人全部“封杀”';

$array_news[]='央视春晚语言类节目一审宣传负责人称笑抽了';

$array_news[]='曾轰动娱乐圈的脑残粉事件 exo粉丝附惊悚割腕照';

$array_news[]='网曝胡歌江疏影热恋甜蜜喂食街边拥吻';

$array_news[]='曝王菲谢霆锋牵手看过亿豪宅年前欲同居';

$array_news[]='顾长卫自曝曾沉溺夜店被叫“两会”代表避谈蒋雯丽';

$array_news[]='柯震东流泪忆狱中生活：足足四天不敢大便';

$array_news[]='曝涉毒女主播王婧曾当孙楠小三惹怒买红妹';

$array_news[]='网曝“国民老公”王思聪加盟湖南卫视跨年';

$array_news[]='谢霆锋妹妹被曝和花心男友复合传男方死缠烂打';

$array_news[]='10位大叔男星的萝莉小娇妻美艳大比拼(图）　';

$array_news[]='万达上市揭章子怡65岁母亲亿万富婆的背后';

$array_news[]='中戏花旦情史揭秘:章子怡恋汪峰汤唯嫁导演';

$array_news[]='孙红雷新剧中颠覆搞笑海清和服造型首曝光(图)';

$array_news[]='范冰冰求摸脸证未整容早年艺校顶书练功照清纯可人';

$array_news[]='李小冉公司发声明：与刘云飞无任何瓜葛';

$array_news[]='成龙剖白父亲心声：以后会做一个“称职父亲”';

$array_news[]='2014年娱乐圈最具影响力的十大明星（图）';

$array_news[]='新《神雕》师徒“情深” 陈晓为王茂蕾作画';

$array_news[]='最养眼的10大少数民族女星引领异域风情（图）';

$array_news[]='媒体分析局势突变：普京顶不住俄罗斯百天内或崩盘';

$array_news[]='英国网上拍卖雪人融化后“残骸” 那些奇葩拍卖品';

$array_news[]='美国打死都不敢让中国人看的36张照片曝光';

$array_news[]='英国15名大妈脱衣拍日历做慈善募款';

$array_news[]='德警方悬赏7万元寻身价百万信鸽盘点那些昂贵动物';

$array_news[]='美公然撮合日澳天价哈哈大单嚣张对中国叫板';

$array_news[]='探秘亚马逊“一女多夫”原始部落生活';

$array_news[]='中国新导弹轻易毁敌方核武俄美压力巨大';

$array_news[]='第三次安倍内阁启动具鹰派色彩中谷元接任新防长';

$array_news[]='美政府实验室再出错一人或接触埃博拉病毒';

$array_news[]='叙利亚最新卫星图公布：连年战火多处被夷为平地';

$array_news[]='以色列拘留近30名涉嫌贪官';

$array_news[]='投越多输越多？美媒怒批科比这数据怎比乔丹';

$array_news[]='李狗屎晒妻女与圣诞老人合影奥莉萌化网友';

$array_news[]='视频：男篮斗殴史朱芳雨追打巴西球员成“经典”';

$array_news[]='法媒霸气封面：谁是下一位伊布梅西C罗';

$array_news[]='球星的假期：C罗做土著皇帝内少狂赌德州';

$array_news[]='冰雪美人拼身材妙龄少女雪地秀比基尼';

$array_news[]='恒大宣布邹正张佳祺加盟可弥补边路和后腰位置';

$array_news[]='视频：女子MMA史上TOP5格斗凶狠惨烈绝不输男子';

$array_news[]='上海主帅马跃南下课助理教练刘鹏接任';

$array_news[]='皇马拍写真10座欧冠奖杯抢镜水爷倒酒C罗失踪';

$array_news[]='CBA宝贝圣诞装登场更衣室内自拍不停';

$array_news[]='第37届省港杯将开锣广东以恒大富力球员为班底';

$array_news[]='乔治背传击地戏詹皇';

$array_news[]='维特斯压哨绝杀活塞';

$array_news[]='谷歌风投为何将三分之一的资金投给生命科学公司？';

$array_news[]='中国房价破万的那些城市毕业生去这里要小心';

$array_news[]='中国人的“井底之蛙”资本才最可怕';

$array_news[]='中国未来哪些行业即将驾崩？';

$array_news[]='易宪容：美元强势将持续到2015年';

$array_news[]='客观看待政府巨额净资产';

$array_news[]='不必买房搞定丈母娘娶妻成本最低的8个国家';

$array_news[]='媒体曝股市重挫真相：或是管理层出手打压';

$array_news[]='清华新生家庭摸底调查：富学生才能上清华？';

$array_news[]='2015券商策略会三大关键词：国企改革成主线';

$array_news[]='闲钱存银行不如投资稳赚的12个高利润行业';

$array_news[]='方正系否认被停贷';

$array_news[]='回顾2014电商六大关键词，展望2015电商三大趋势';

$array_news[]='魅蓝之蓝，杀入红海';

$array_news[]='2014中国游戏市场不得不关注的6大趋势';

$array_news[]='周鸿祎信解读：安全真是手机必需？';

$array_news[]='拿什么拯救电信，IT还是互联网？';

$array_news[]='黑客影响还在扩大，邮件爆料索尼有意出售音乐业务';

$array_news[]='对话姬十三：如何让科学变得更值钱';

$array_news[]='锤子密谈，他们都谈了什么？';

$array_news[]='团购只是疑阵大众点评暗自“去团购化”？';

$array_news[]='你的头顶上有多少架飞机正飞过？百度天眼知道';

$array_news[]='2014年日本人制造了哪些好玩的科技产品？';

$array_news[]='排片坍缩的《一步之遥》：马珂玩砸了！';

$array_news[]='洗车加入电商烧钱大战高额补贴前景难料';

$array_news[]='铁路官网12306大量用户数据遭泄露已在网上售卖';

$array_news[]='苹果亚马逊抱团“缺席”《刺杀金正日》首映';

$array_news[]='12306用户数据泄露请尽快修改密码！';

$array_news[]='高档车用户大数据研究报告发布';

$array_news[]='优酷推限时免费观影福利周二免费看大片';

$array_news[]='顺丰副总裁李东起：B2B快递服务是主要营业来源';

$array_news[]='海岛之家创始人：目的地才是流量入口';

$array_news[]='淘米网副总裁周全因个人原因辞职';

$array_news[]='禾丰常务副总裁：饲料业进入综合竞争力比拼时代';

$array_news[]='专访中筹网金创始人：紧抓房地产众筹触网机会';

$array_news[]='网秦董事会批准上限8000万美元的股票回购计划';

$array_news[]='前滩宅地昨日连创单价纪录';

$array_news[]='企业高管年薪超10万没有房产相亲时被当骗子';

$array_news[]='北京：两天批复13个新房预售证';

$array_news[]='沧州一廉租房小区暖气温吞吞室温达不到18℃';

$array_news[]='住建委暗访中介严查公租房项目违规出租行为';

$array_news[]='东风汽车原党委副书记范仲被调查';

$array_news[]='沈海高速罗源段多车连环相撞 3人被困交通一度拥堵';

$array_news[]='市民贪便宜4元买劣质玻璃水弄坏电机花200元更换';

$array_news[]='优车诚品与亚洲联合财务达成合作';

$array_news[]='新能源车补贴调降成本摊销成企业难题';

$array_news[]='天使投资入省库机构、项目、金额数苏州夺魁';

$array_news[]='苏州：228省道新苏虞张公路（苏州西环北延中环...';

$array_news[]='库存！还是库存！商业入市套数激增';

$array_news[]='苏州社保十大实事有哪些，请您来票选';

$array_news[]='城际峰景住宅小区地下泵房水池调整公示';

$array_news[]='广州：起亚K4优惠8000元喜欢大车看过来';

$array_news[]='北京：进口丰田埃尔法现车充足购车赠新车礼包';

$array_news[]='易车苏州测试2014款宝马X1 sDrive 18i';

$array_news[]='这样四种女人在男人心里最吃香';

$array_news[]='保留自己的隐私女人4大秘密不要对男人说';

$array_news[]='韩式新风潮打底衫露出来';

$array_news[]='男人恋爱后4个心态更脆弱也更想被女人呵护';

$array_news[]='提防3种恋爱操纵术别做爱情傀儡';

$array_news[]='八大身体缺陷是好事';

$array_news[]='中医教你怎么看从指甲上的月牙判断健康状况';

$array_news[]='海鲜营养吃不当易中毒';

$array_news[]='健康新知：男人加班越多妻子竟越健康';

$array_news[]='五个妙招让你少长白发';

$array_news[]='记好最火5款下装冬装保暖搭配保你美（组图）';

$array_news[]='陈乔恩时尚街拍化身小女人';

$array_news[]='小宋佳冬日街拍成时尚范本';

$array_news[]='西装套装帅气优雅穿搭术周迅舒淇示范搭配';

$array_news[]='中长款秋装外套显高气质层次美搭提升整体造型';

$array_news[]='从炼金术到铸币局：科学之外的牛顿';

$array_news[]='比火星宜居：美国设想载人飞艇悬浮金星大气';

$array_news[]='2014年度炫酷智能设备：可穿戴科技获热捧　　';

$array_news[]='印尼火山内部岩浆燃烧形成“蓝色岩浆喷发”';

$array_news[]='2014年手机大佬雷人话语：“不服跑个分？” ';

$array_news[]='地球上令人向往的神秘之地：中国独有两处';

$array_news[]='世界上最快的人和物：博尔特VS粪炮真菌';

$array_news[]='全球最恐怖罕见怪病：行尸走肉症居首';

$array_news[]='海洋最深处发现狮子鱼：8145米深度刷新纪录';

$array_news[]='猎户座重返大气层影像公布：2200度高温考验';

$array_news[]='中兴全新诠释smart2.0时代价值';

$array_news[]='小米的扩张因陷侵权困扰有所放缓';

$array_news[]='中国智能手机强势涌入马来西亚';

$array_news[]='中国移动与央视合作共建4G视频传播中心';

$array_news[]='不一样的操作体验，Hola1.5桌面使用简评';

$array_news[]='候鸟飞抵北塘口为冬日古镇添彩';

$array_news[]='盘点动物界十大"胖子"：胖得令人发指(图)';

$array_news[]='云南鲁甸一中师生冲突调查';

$array_news[]='桂冠岂堪“折” 国际哪有“间”';

$array_news[]='温州教育局要求校园内“不庆祝圣诞”';

$array_news[]='南昌2015年中考抽考历史';

$array_news[]='教学点数字资源不能止于全覆盖';

$array_news[]='节日大作战真古龙圣诞版本群侠狂欢';

$array_news[]='360游戏狂欢节购票有喜幸运儿一夜变土豪';

$array_news[]='登陆领福利手游《武侠外传》圣诞活动限时开启';

$array_news[]='万仙阵《封神伏魔》火杏酒世间妖魔战斗';

$array_news[]='天天富翁迷你圣诞树图鉴 A+级迷你圣诞树属性';

$array_news[]='广东台山2015第一期会计从业资格考试时间3月17日起';

$array_news[]='宁夏2015年中级会计职称考试现场审核确认时间公布';

$array_news[]='2015军队文职面试备考素材之文学作品的类型和体裁';

$array_news[]='文化2014：艺考新政最难艺教有创新';

$array_news[]='2015国家公务员面试备考：好心态助你公务员面试..';

$array_news[]='2015国家公务员面试备考：面试中女士如何穿衣化妆';

$array_news[]='妻子与楼下“邻居”偷情男子当场捉奸怒砍偷情者';

$array_news[]='男子超速被罚后告交警队：路段限速过低';

$array_news[]='3岁娃被实习老师关小黑屋事后常傻笑睡觉被惊醒';

$array_news[]='女子将万元现金洒向其他旅客只因丈夫在外风流';

$array_news[]='男子撞车几小时后查出饮酒自称为了压惊刚喝的';

$array_news[]='上海地铁行乞女被拍后打乘客行乞男童：打死你';

$array_news[]='女子与现男友交往5个月生下一女报警称捡到弃婴';

$array_news[]='安徽一商人入狱3年半刑满获释4年后被改判无罪';

$array_news[]='心中“女神”患癌男子猛追娶回：娶她陪她抗癌';

$array_news[]='女子谎称系某中央领导人“私生女” 地方950万';

$array_news[]='为帮家乡果农打开销路 90后大学生免费送苹果';

$array_news[]='屋外垃圾场屋内搅豆浆山东一豆腐黑作坊被查封';

$array = array();

$number = $_POST["pagenumber"];

$pagesize = $_POST["pagesize"];

$p = $pagesize*$number-$pagesize;

$s = $pagesize*$number;

if(!empty($array_news[$p])){

$i=0;

for($p;$p<$s;$p++){

$array['data'][$i]['D_Name'] = ($p+1).'、'.$array_news[$p];

$i++;

}

$array['length']=$i;

}else{

$array['length']='0';

}

echo json_encode($array);

}

然后新建 index.html模版文件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>滚动到页面顶部加载</title>

H1,.div,.loaddiv,.div_null{text-align: center;}

body{margin:100px auto 100px;}

.mainDiv {width: 800px;padding: 10px;margin:10px auto;}

.item {width: 600px;font-size: 12px;margin: 10px;}

.title {font-size: 16px;line-height: 20px;}

.alink{display:none;font-size: 46px;}

.loaddiv,.div_null{display:none;}

.ov{color:red;}

</style>

</head>

<body>

<div class="title">160亿补贴难圆电信4G竞争的翻身梦</div>

</div>

<div class="title">阿里巴巴打击假货：迫于公众压力的一场表演？</div>

</div>

<div class="title">创业者的春天来到，90后成熟了吗？</div>

</div>

<div class="title">中国投资2000亿的TD技术，是被国际企业淘汰的？</div>

</div>

<div class="title">二手车是O2O价值实现的新战场</div>

</div>

<div class="title">医疗资源紧缺，中国的年轻人未来健康指靠谁？</div>

</div>

<div class="title">回顾2014电商六大关键词，展望2015电商三大趋势</div>

</div>

<div class="title">出租车司机挑活解决拒载老大难靠“滴米”是做梦</div>

</div>

<div class="title">山西反腐风暴：已有17名县委书记落马</div>

</div>

<div class="title">2014年中国审计促挽回损失超2400亿</div>

</div>

<div class="title">中国经济外交新常态之一：经济外交开启中国范式</div>

</div>

<div class="title">朱明国落马后被曝别墅中搜出十余车黄金钞票</div>

</div>

没有更多的数据了

</div>

</div>

</div>

</body>

</html>

最后新建js文件 endlesspage.js

var gPageSize = 10;

var i = 1; //设置当前页数，全局变量

$(function () {

//根据页数读取数据

function getData(pagenumber) {

i++; //页码自动增加，保证下次调用时为新的一页。

$.ajax({

type: "post",

url: "page.php",

data: { pagesize: gPageSize, pagenumber: pagenumber },

dataType: "json",

success: function (data) {

$(".loaddiv").hide();

if (data.length > 0) {

var jsonObj = data.data;

insertDiv(jsonObj);

}else{

$(".div_null").show();

$("#btn_Page").hide();

}

beforeSend: function () {

$(".loaddiv").show();

error: function () {

$(".loaddiv").hide();

}

});

}

//初始化加载第一页数据

getData(1);

//生成数据html,append到div中

function insertDiv(json) {

var $mainDiv = $(".mainDiv");

var html = '';

html += '<div class="item ov" style="border:1px solid">';

for (var i = 0; i < json.length; i++) {

html += ' <div class="title">' + json[i].D_Name + '</div>';

}

html += '</div>';

$mainDiv.append(html);

}

//==============核心代码=============

var scrollHandler = function () {

var scrollTop = $(document).scrollTop(); //滚动条滚动高度

var documentH = $(document).height(); //滚动条高度

var windowH = $(window).height(); //窗口高度

if (scrollTop >= documentH - windowH) {

if (i % 100 === 0) {//每100页做一次停顿！

getData(i);

$(window).unbind('scroll');

$("#btn_Page").show();

}else{

getData(i);

$("#btn_Page").hide();

}

//定义鼠标滚动事件

$(window).scroll(scrollHandler);

//继续加载按钮事件

$("#btn_Page").click(function () {

getData(i);

$(window).scroll(scrollHandler);

});

另外我们还需要(下面我会将整个打包上传，下载后放到本地环境直接运行就ok了)：

jquery-1.4.1.js

loading.gif

运行的效果是这样的，还凑合：

ajax页面预加载

相关推荐