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模拟的Ping效果代码 (Web Ping)
Mar 13 Javascript
纯js实现遮罩层效果原理分析
May 27 Javascript
分享两个手机访问pc网站自动跳转手机端网站代码
Dec 24 Javascript
jQuery动态修改超链接地址的方法
Feb 13 Javascript
jQuery往textarea中光标所在位置插入文本的方法
Jun 26 Javascript
JavaScript实现带缓冲效果的随屏滚动漂浮广告代码
Nov 06 Javascript
浅析JavaScript中的变量复制、参数传递和作用域链
Jan 13 Javascript
解析Node.js异常处理中domain模块的使用方法
Feb 16 Javascript
JQUERY的AJAX请求缓存里的数据问题处理
Feb 23 Javascript
原生js仿淘宝网商品放大镜效果
Feb 28 Javascript
JS全角与半角转化实例(分享)
Jul 04 Javascript
element-ui upload组件多文件上传的示例代码
Oct 17 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
用Flash图形化数据(二)
2006/10/09 PHP
与数据库连接
2006/10/09 PHP
PHP 类型转换函数intval
2009/06/20 PHP
php设计模式 Factory(工厂模式)
2011/06/26 PHP
解析php session_set_save_handler 函数的用法(mysql)
2013/06/29 PHP
PHP如何使用Memcached
2016/04/05 PHP
PHP面向对象程序设计内置标准类,普通数据类型转为对象类型示例
2019/06/12 PHP
Nigma vs Alliance BO5 第四场2.14
2021/03/10 DOTA
javascript html 静态页面传参数
2009/04/10 Javascript
JavaScript执行效率与性能提升方案
2012/12/21 Javascript
页面使用密码保护代码
2013/04/10 Javascript
javascript 树形导航菜单实例代码
2013/08/13 Javascript
禁止IE用右键的JS代码
2013/12/30 Javascript
Node.js项目中调用JavaScript的EJS模板库的方法
2016/03/11 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【一】
2016/05/10 Javascript
JS实现动态表格的添加,修改,删除功能(推荐)
2016/06/15 Javascript
基于jQuery实现仿微博发布框字数提示
2016/07/27 Javascript
解析预加载显示图片艺术
2016/12/05 Javascript
详解如何较好的使用js
2016/12/16 Javascript
react-router4 嵌套路由的使用方法
2017/07/24 Javascript
vue+node+webpack环境搭建教程
2017/11/05 Javascript
浅谈vue 单文件探索
2018/09/05 Javascript
简单了解JavaScript异步
2019/05/23 Javascript
Windows上配置Emacs来开发Python及用Python扩展Emacs
2015/11/20 Python
Python处理JSON数据并生成条形图
2016/08/05 Python
详解python中的hashlib模块的使用
2019/04/22 Python
Python实现微信好友的数据分析
2019/12/16 Python
Python3实现个位数字和十位数字对调, 其乘积不变
2020/05/03 Python
Python创建临时文件和文件夹
2020/08/05 Python
Nayomi官网:沙特阿拉伯王国睡衣和内衣品牌
2020/12/19 全球购物
服装采购员岗位职责
2014/03/15 职场文书
主要负责人任命书
2014/06/06 职场文书
银行求职自荐书
2014/06/25 职场文书
教你如何使用Python实现二叉树结构及三种遍历
2021/06/18 Python
MySQL 数据类型详情
2021/11/11 MySQL
vue router 动态路由清除方式
2022/05/25 Vue.js