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 在光标定位的地方插入文字的插件
May 10 Javascript
使用JS或jQuery模拟鼠标点击a标签事件代码
Mar 10 Javascript
JavaScript获取flash对象与网上的有所不同
Apr 21 Javascript
整理JavaScript对DOM中各种类型的元素的常用操作
May 05 Javascript
AngularJS自定义控件实例详解
Dec 13 Javascript
bootstrap table实例详解
Jan 06 Javascript
详解angularJs模块ui-router之状态嵌套和视图嵌套
Apr 28 Javascript
jQuery基于cookie实现换肤功能实例
Oct 14 jQuery
通过循环优化 JavaScript 程序
Jun 24 Javascript
js实现图片跟随鼠标移动效果
Oct 16 Javascript
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
Jul 18 Javascript
Openlayers+EasyUI Tree动态实现图层控制
Sep 28 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下mysql数据库操作类(改自discuz)
2010/07/03 PHP
Discuz批量替换帖子内容的方法(使用SQL更新数据库)
2014/06/23 PHP
php图片的二进制转换实现方法
2014/12/15 PHP
PHP YII框架开发小技巧之模型(models)中rules自定义验证规则
2015/11/16 PHP
Zend Framework路由器用法实例详解
2016/12/11 PHP
Javascript实例教程(19) 使用HoTMetal(6)
2006/12/23 Javascript
多浏览器支持的右下角浮动窗口
2010/04/01 Javascript
JavaScript 继承使用分析
2011/05/12 Javascript
JavaScript高级程序设计 阅读笔记(七) ECMAScript中的语句
2012/02/27 Javascript
jQuery scroll事件实现监控滚动条分页示例
2014/04/04 Javascript
JavaScript日期时间格式化函数分享
2014/05/05 Javascript
node.js操作mongoDB数据库示例分享
2014/11/26 Javascript
js实现鼠标点击文本框自动选中内容的方法
2015/08/20 Javascript
JavaScript数据结构与算法之链表
2016/01/29 Javascript
微信小程序 实现tabs选项卡效果实例代码
2016/10/31 Javascript
基于bootstrap风格的弹框插件
2016/12/28 Javascript
使用nodejs下载风景壁纸
2017/02/05 NodeJs
bootstrap table使用入门基本用法
2017/05/24 Javascript
AngularJS学习笔记之表单验证功能实例详解
2017/07/06 Javascript
用JavaScript做简易的购物车的代码示例
2017/10/20 Javascript
vue实现微信分享功能
2018/11/28 Javascript
express + jwt + postMan验证实现持久化登录
2019/06/05 Javascript
vue页面加载时的进度条功能(实例代码)
2020/01/13 Javascript
原生js无缝轮播插件使用详解
2020/03/09 Javascript
JS Generator 函数的含义与用法实例总结
2020/04/08 Javascript
详解Vue.js 响应接口
2020/07/04 Javascript
python socket 超时设置 errno 10054
2014/07/01 Python
Python装饰器知识点补充
2018/05/28 Python
Python实现的连接mssql数据库操作示例
2018/08/17 Python
python图形开发GUI库wxpython使用方法详解
2020/02/14 Python
TensorFlow固化模型的实现操作
2020/05/26 Python
python3通过subprocess模块调用脚本并和脚本交互的操作
2020/12/05 Python
CSS3 选择器 伪类选择器介绍
2012/01/21 HTML / CSS
android面试问题与答案
2016/12/27 面试题
2014年个人工作总结范文
2014/11/07 职场文书
windows10 家庭版下FTP服务器搭建教程
2022/08/05 Servers