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 相关文章推荐
JS获取文本框,下拉框,单选框的值的简单实例
Feb 26 Javascript
jquery的trigger和triggerHandler的区别示例介绍
Apr 20 Javascript
jquery简单图片切换显示效果实现方法
Jan 14 Javascript
EasyUI中combobox默认值注意事项
Mar 01 Javascript
浅析函数声明和函数表达式——函数声明的声明提前
May 03 Javascript
Javascript对象字面量的理解
Jun 22 Javascript
值得分享的JavaScript实现图片轮播组件
Nov 21 Javascript
Angular2 父子组件数据通信实例
Jun 22 Javascript
js 公式编辑器 - 自定义匹配规则 - 带提示下拉框 - 动态获取光标像素坐标
Jan 04 Javascript
js中apply()和call()的区别与用法实例分析
Aug 14 Javascript
解决vue动态为数据添加新属性遇到的问题
Sep 18 Javascript
javascript中call,apply,callee,caller用法实例分析
Jul 24 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开发大型项目的一点经验
2006/10/09 PHP
ThinkPHP3.1新特性之动态设置自动完成和自动验证示例
2014/06/19 PHP
PHP生成随机密码类分享
2014/06/25 PHP
Apache服务器下防止图片盗链的办法
2015/07/06 PHP
py文件转exe时包含paramiko模块出错解决方法
2016/08/12 PHP
php常用字符函数实例小结
2016/12/29 PHP
php中类和对象:静态属性、静态方法
2017/04/09 PHP
PHP手机号中间四位用星号*代替显示的实例
2017/06/02 PHP
Laravel中获取路由参数Route Parameters的五种方法示例
2017/09/29 PHP
JQuery 简便实现页面元素数据验证功能
2007/03/24 Javascript
JS 时间显示效果代码
2009/08/23 Javascript
动态加载外部javascript文件的函数代码分享
2011/07/28 Javascript
JS获得图片alt信息的方法
2015/04/01 Javascript
基于JavaScript代码实现微信扫一扫下载APP
2015/12/30 Javascript
对Angular.js Controller如何进行单元测试
2016/10/25 Javascript
jQuery 插件实现随机自由弹跳气泡样式
2017/01/12 Javascript
JS奇技之利用scroll来监听resize详解
2017/06/15 Javascript
React Native中Navigator的使用方法示例
2017/10/13 Javascript
JS写滑稽笑脸运动效果
2020/05/28 Javascript
javascript中正则表达式语法详解
2020/08/07 Javascript
js+h5 canvas实现图片验证码
2020/10/11 Javascript
Ant Design的可编辑Tree的实现操作
2020/10/31 Javascript
[02:07]DOTA2新英雄展现中国元素,完美“圣典”亮相央视
2016/12/19 DOTA
[01:02:30]Mineski vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第三场 8.22
2019/09/05 DOTA
Python3.2中的字符串函数学习总结
2015/04/23 Python
python 多线程重启方法
2019/02/18 Python
django 环境变量配置过程详解
2019/08/06 Python
python实现文件批量编码转换及注意事项
2019/10/14 Python
Django 自动生成api接口文档教程
2019/11/19 Python
解决Tensorflow sess.run导致的内存溢出问题
2020/02/05 Python
jupyter实现重新加载模块
2020/04/16 Python
通俗易懂了解Python装饰器原理
2020/09/17 Python
世界上最大的汽车共享网站:Zipcar
2017/01/14 全球购物
Soft Cotton捷克:来自爱琴海棉花的浴袍
2017/02/01 全球购物
奶茶专卖店创业计划书
2014/01/18 职场文书
商业门面租房协议书
2014/11/25 职场文书