jQuery实现下拉加载功能实例代码
更新时间:2016年04月01日 13:34:48 作者:tangsir28
本文通过一段实例代码给大家介绍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实现下拉加载功能实例代码,希望对大家有所帮助!
相关文章
JavaScript实现向select下拉框中添加和删除元素的方法
这篇文章主要介绍了JavaScript实现向select下拉框中添加和删除元素的方法,涉及jQuery中append()与remove()方法动态操作表单元素的相关技巧,需要的朋友可以参考下2017-03-03
使用jQuery的toggle()方法对HTML标签进行显示、隐藏的方法(示例)
本文通过示例给大家介绍了使用jQuery的toggle()方法对HTML标签进行显示、隐藏操作的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下2016-09-09
jquery UI Datepicker时间控件的使用方法(加强版)
这篇文章继续介绍了jquery UI Datepicker时间控件的使用方法,主要关于Datepicker插件的介绍和使用,并分享了第一个日历插件的使用实例,需要的朋友可以参考下2015-11-11


最新评论