jQuery实现下拉加载功能实例代码
来源: 阅读:1181 次 日期:2016-07-08 16:07:52
温馨提示: 小编为您整理了“jQuery实现下拉加载功能实例代码”,方便广大网友查阅!

本文通过一段实例代码给大家介绍jquery实现下拉加载功能,代码简单易懂,需要的朋友参考下吧

直接给大家贴代码了,具体代码如下所示:

<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实现下拉加载功能实例代码,希望对大家有所帮助!

更多信息请查看网络编程
由于各方面情况的不断调整与变化, 提供的所有考试信息和咨询回复仅供参考,敬请考生以权威部门公布的正式信息和咨询为准!
关于我们 | 联系我们 | 人才招聘 | 网站声明 | 网站帮助 | 非正式的简要咨询 | 简要咨询须知 | 加入群交流 | 手机站点 | 投诉建议
工业和信息化部备案号:滇ICP备2023014141号-1 云南省教育厅备案号:云教ICP备0901021 滇公网安备53010202001879号 人力资源服务许可证:(云)人服证字(2023)第0102001523号
云南网警备案专用图标
联系电话:0871-65317125(9:00—18:00) 获取招聘考试信息及咨询关注公众号:hfpxwx
咨询QQ:526150442(9:00—18:00)版权所有:
云南网警报警专用图标
Baidu
map