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 相关文章推荐
菜鸟javascript基础整理1
Dec 06 Javascript
页面加载完成后再执行JS的jquery写法以及区别说明
Feb 22 Javascript
javascript实现十六进制颜色值(HEX)和RGB格式相互转换
Jun 20 Javascript
jQuery支持动态参数将函数绑定到事件上的方法
Mar 17 Javascript
分享一些常用的jQuery动画事件和动画函数
Nov 27 Javascript
jQuery实现页面顶部显示的进度条效果完整实例
Dec 09 Javascript
JS使用onerror捕获异常示例
Aug 03 Javascript
JS条形码(一维码)插件JsBarcode用法详解【编码类型、参数、属性】
Apr 19 Javascript
jQuery.Ajax()的data参数类型详解
Jul 23 jQuery
JavaScript实现树的遍历算法示例【广度优先与深度优先】
Oct 26 Javascript
vue组件name的作用小结
May 23 Javascript
javascript设计模式 ? 抽象工厂模式原理与应用实例分析
Apr 09 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
用phpmyadmin更改mysql5.0登录密码
2008/03/25 PHP
php多个字符串替换成同一个的解决方法
2013/06/18 PHP
PHP两种快速排序算法实例
2015/02/15 PHP
详解WordPress中给链接添加查询字符串的方法
2015/12/18 PHP
php实现图片缩略图的方法
2016/03/29 PHP
基于PHP实现用户注册登录功能
2016/10/14 PHP
PHP Trait功能与用法实例分析
2020/06/03 PHP
php实现JWT验证的实例教程
2020/11/26 PHP
jQuery 解析xml文件
2009/08/09 Javascript
输入框的字数时时统计—关于 onpropertychange 和 oninput 使用
2011/10/21 Javascript
jQuery处理xml格式的返回数据(实例解析)
2013/11/28 Javascript
jquery插件jTimer(jquery定时器)使用方法
2013/12/23 Javascript
基于jQuery实现仿淘宝套餐选择插件
2015/03/04 Javascript
JavaScript简单表格编辑功能实现方法
2015/04/16 Javascript
angularjs表格ng-table使用备忘录
2016/03/09 Javascript
原生js实现可拖动的登录框效果
2017/01/21 Javascript
Vue2.0 axios前后端登陆拦截器(实例讲解)
2017/10/27 Javascript
使用mock.js随机数据和使用express输出json接口的实现方法
2018/01/07 Javascript
Cocos2d实现刮刮卡效果
2018/12/20 Javascript
微信小程序实现人脸识别登陆的示例代码
2019/04/02 Javascript
Python实现批量下载图片的方法
2015/07/08 Python
Python hashlib模块用法实例分析
2018/06/12 Python
简单了解如何封装自己的Python包
2020/07/08 Python
如何基于Python按行合并两个txt
2020/11/03 Python
美国迪克体育用品商店:DICK’S Sporting Goods
2018/07/24 全球购物
物流司机岗位职责
2013/12/28 职场文书
秋季运动会加油稿200字
2014/01/11 职场文书
出纳员岗位责任制
2014/02/11 职场文书
企业家王石演讲稿:坚持与放下
2014/04/27 职场文书
关于工作时间玩手机的检讨书
2014/09/18 职场文书
签订劳动合同通知书
2015/04/16 职场文书
幼儿园毕业致辞
2015/07/29 职场文书
生日寿星公答谢词
2015/09/29 职场文书
使用logback实现按自己的需求打印日志到自定义的文件里
2021/08/30 Java/Android
GO语言字符串处理函数之处理Strings包
2022/04/14 Golang
Valheim服务器 Mod修改安装教程 【ValheimPlus】
2022/12/24 Servers