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 相关文章推荐
Jquery的hover方法让鼠标经过li时背景变色
Sep 06 Javascript
jQuery实现的原图对比窗帘效果
Jun 15 Javascript
JavaScript操作Oracle数据库示例
Mar 06 Javascript
JavaScript File分段上传
Mar 10 Javascript
JS获取IMG图片高宽的简单实例
May 17 Javascript
Jquery揭秘系列:ajax原生js实现详解(推荐)
Jun 08 Javascript
jQuery模拟淘宝购物车功能
Feb 27 Javascript
JS获取本地地址及天气的方法实例小结
May 10 Javascript
scrapyd schedule.json setting 传入多个值问题
Aug 07 Javascript
基于Element的组件改造的树形选择器(树形下拉框)
Feb 27 Javascript
js+css实现全屏侧边栏
Jun 16 Javascript
解决Vue-cli无法编译es6的问题
Oct 30 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
2020最新CPU的性能排名
2020/04/02 数码科技
php5.4以下版本json不支持不转义内容中文的解决方法
2015/01/13 PHP
PHP序列化和反序列化深度剖析实例讲解
2020/12/29 PHP
MooTools 1.2介绍
2009/09/14 Javascript
jquery判断checkbox(复选框)是否被选中的代码
2010/10/20 Javascript
基于jquery实现的鼠标拖拽元素复制并写入效果
2011/08/23 Javascript
jQuery中trigger()方法用法实例
2015/01/19 Javascript
JavaScript计算值然后把值嵌入到html中的实现方法
2016/10/29 Javascript
JavaScript下拉菜单功能实例代码
2017/03/01 Javascript
jQuery回调方法使用示例
2017/06/26 jQuery
jsonp跨域请求详解
2017/07/13 Javascript
详解react、redux、react-redux之间的关系
2018/04/11 Javascript
详解Node.js一行命令上传本地文件到服务器
2019/04/22 Javascript
Vuex新手的理解与使用详解
2019/05/31 Javascript
微信小程序开发(一):服务器获取数据列表渲染操作示例
2020/06/01 Javascript
javascript实现移动端上传图片功能
2020/08/18 Javascript
JavaScript 闭包的使用场景
2020/09/17 Javascript
python提取页面内url列表的方法
2015/05/25 Python
python获取外网ip地址的方法总结
2015/07/02 Python
聊聊Python中的pypy
2018/01/12 Python
python Dijkstra算法实现最短路径问题的方法
2019/09/19 Python
python实现暗通道去雾算法的示例
2020/09/27 Python
python UIAutomator2使用超详细教程
2021/02/19 Python
新加坡领先的在线生活方式和杂货购物网站:EAMART
2019/04/02 全球购物
阿巴庭院:Abba Patio
2019/06/18 全球购物
摩飞电器俄罗斯官方网站:Morphy Richards俄罗斯
2020/07/30 全球购物
高校自主招生自荐信
2013/12/09 职场文书
会计应聘求职信范文
2013/12/17 职场文书
求职毕业生自荐书
2014/02/08 职场文书
护士毕业生自我鉴定
2014/02/08 职场文书
学生会宣传部部长竞选演讲稿
2014/04/25 职场文书
小学优秀教师事迹材料
2014/12/16 职场文书
个人维稳承诺书
2015/05/04 职场文书
运动会开幕式致辞
2015/07/29 职场文书
详解MySQL数据库千万级数据查询和存储
2021/05/18 MySQL
一篇文章带你搞懂Python类的相关知识
2021/05/20 Python