jQuery实现下拉加载功能实例代码


Posted in Javascript onApril 01, 2016

废话不多说了,直接给大家贴代码了,具体代码如下所示:

<script>
var str = '';
if(page=="") page=1; 
var stop=true;//触发开关,防止多次调用事件 
$(window).scroll( function(event){
//当内容滚动到底部时加载新的内容 100当距离最底部100个像素时开始加载. 
if ($(this).scrollTop() + $(window).height() + 10 >= $(document).height() && $(this).scrollTop() > 10) {
//if(stop==true){ 
//stop=false; 
//var canshu="page/"+page+"; 
var url = "";
var parm = {'page':page};
page=page+1;//当前要加载的页码 
//加载提示信息 
$("#showlists").append("<li class='ajaxtips'><div style='font-size:2em'>Loding…..</div><>");
$.post(url,parm,function(data){
if( data.count == 0 ) {
$('.prolist-abtn').html('已全部加载完');
return;
} 
$.each(eval(data), function(data, val) {
var url1 = "";
$(".ajaxtips").hide();
str = '<div class="content" id="showdiv">';
str +='<div class="cont clearfix">';
str +='<a href="url"><div class="cont_img fl">';
str +='<img src='+val.imgurl+' alt="" /></div>';
str += '<div class="cont_list fl"><p>'+val.sceneryname+'</p><ul class="cont_list fl">';
str += '<li class="cont_list2"><span>¥</span>';
str +='<strong>'+val.sellerprice+'</strong>起<i>¥'+val.sellerprice+'</i></li>';
str +='</ul></div></a></div></div>';
$("#showdiv").append(str);//把新的内容加载到内容的后面 
}); 
stop=true; 
},'JSON') 
} 
});
</script>

以上代码是小编给大家分享的jQuery实现下拉加载功能实例代码,希望对大家有所帮助!

Javascript 相关文章推荐
select、radio表单回显功能实现避免使用jquery载入赋值
Jun 08 Javascript
jquery选择符快速提取web表单数据示例
Mar 27 Javascript
jquery编写Tab选项卡滚动导航切换特效
Jul 17 Javascript
JavaScript判断页面加载完之后再执行预定函数的技巧
May 17 Javascript
JavaScript动态添加css样式和script标签
Jul 19 Javascript
浅谈jQuery为哪般去掉了浏览器检测
Aug 29 Javascript
Web性能优化系列 10个提升JavaScript性能的技巧
Sep 27 Javascript
浅析上传头像示例及其注意事项
Dec 14 Javascript
JS动态生成年份和月份实例代码
Feb 04 Javascript
addEventListener()与removeEventListener()解析
Apr 20 Javascript
Angular5.0 子组件通过service传递值给父组件的方法
Jul 13 Javascript
layui问题之渲染数据表格时,仅出现10条数据的解决方法
Sep 12 Javascript
Extjs实现下拉菜单效果
Apr 01 #Javascript
实例讲解jQuery EasyUI tree中state属性慎用
Apr 01 #Javascript
EasyUi combotree 实现动态加载树节点
Apr 01 #Javascript
如何在Linux上安装Node.js
Apr 01 #Javascript
EasyUi中的Combogrid 实现分页和动态搜索远程数据
Apr 01 #Javascript
简介EasyUI datagrid editor combogrid搜索框的实现
Apr 01 #Javascript
jQuery实现的导航动画效果(附demo源码)
Apr 01 #Javascript
You might like
用PHP将网址字符串转换成超链接(网址或email)
2010/05/25 PHP
PHP中json_encode、json_decode与serialize、unserialize的性能测试分析
2010/06/09 PHP
PHP有序表查找之二分查找(折半查找)算法示例
2018/02/09 PHP
表单项的name命名为submit、reset引起的问题
2007/12/22 Javascript
ExtJS4中使用mixins实现多继承示例
2013/12/03 Javascript
JS小游戏之宇宙战机源码详解
2014/09/25 Javascript
Javascript获取CSS伪元素属性的实现代码
2014/09/28 Javascript
jQuery入门基础知识学习指南
2015/08/14 Javascript
jQuery 中msgTips 顶部弹窗效果实现代码
2017/08/14 jQuery
原生JS 购物车及购物页面的cookie使用方法
2017/08/21 Javascript
初学者AngularJS的环境搭建过程
2017/10/27 Javascript
利用原生js实现html5小游戏之打砖块(附源码)
2018/01/03 Javascript
对vue中v-if的常见使用方法详解
2018/09/28 Javascript
vue-router命名路由和编程式路由传参讲解
2019/01/19 Javascript
vue在自定义组件中使用v-model进行数据绑定的方法
2019/03/25 Javascript
微信小程序判断用户是否需要再次授权获取个人信息
2019/07/18 Javascript
[54:43]DOTA2-DPC中国联赛 正赛 CDEC vs Dynasty BO3 第一场 2月22日
2021/03/11 DOTA
跟老齐学Python之编写类之四再论继承
2014/10/11 Python
python监控文件并且发送告警邮件
2018/06/21 Python
python中实现控制小数点位数的方法
2019/01/24 Python
python Manager 之dict KeyError问题的解决
2019/12/21 Python
Python正则表达式学习小例子
2020/03/03 Python
Python如何读写CSV文件
2020/08/13 Python
Python LMDB库的使用示例
2021/02/14 Python
Bogner美国官网:滑雪服中的”Dior”
2018/01/30 全球购物
华为c/c++笔试题
2016/01/25 面试题
设计4个线程,其中两个线程每次对j增加1,另外两个线程对j每次减少1。写出程序。
2014/12/30 面试题
乌鸦喝水教学反思
2014/02/07 职场文书
文明倡议书范文
2014/04/15 职场文书
2014教育局对照检查材料思想汇报
2014/09/23 职场文书
张家口市高新区党工委群众路线教育实践活动整改方案
2014/10/25 职场文书
辅导员学期工作总结
2015/08/14 职场文书
导游词之岳阳楼
2019/09/25 职场文书
python编写五子棋游戏
2021/05/25 Python
JavaScript实现两个数组的交集
2022/03/25 Javascript
Java数组详细介绍及相关工具类
2022/04/14 Java/Android