jQuery實現(xiàn)下拉加載功能實例代碼
更新時間:2016年04月01日 13:34:48 作者:tangsir28
本文通過一段實例代碼給大家介紹jquery實現(xiàn)下拉加載功能,代碼簡單易懂,需要的朋友參考下吧
廢話不多說了,直接給大家貼代碼了,具體代碼如下所示:
<script>
var str = '';
if(page=="") page=1;
var stop=true;//觸發(fā)開關(guān),防止多次調(diào)用事件
$(window).scroll( function(event){
//當內(nèi)容滾動到底部時加載新的內(nèi)容 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);//把新的內(nèi)容加載到內(nèi)容的后面
});
stop=true;
},'JSON')
}
});
</script>
以上代碼是小編給大家分享的jQuery實現(xiàn)下拉加載功能實例代碼,希望對大家有所幫助!
相關(guān)文章
JavaScript實現(xiàn)向select下拉框中添加和刪除元素的方法
這篇文章主要介紹了JavaScript實現(xiàn)向select下拉框中添加和刪除元素的方法,涉及jQuery中append()與remove()方法動態(tài)操作表單元素的相關(guān)技巧,需要的朋友可以參考下2017-03-03
使用jQuery的toggle()方法對HTML標簽進行顯示、隱藏的方法(示例)
本文通過示例給大家介紹了使用jQuery的toggle()方法對HTML標簽進行顯示、隱藏操作的相關(guān)資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2016-09-09
jQuery實現(xiàn)的點擊標題文字切換字體效果示例【測試可用】
這篇文章主要介紹了jQuery實現(xiàn)的點擊標題文字切換字體效果,涉及jQuery基于事件響應(yīng)實現(xiàn)頁面元素屬性動態(tài)變換相關(guān)操作技巧,需要的朋友可以參考下2018-04-04
jquery實現(xiàn)勾選復(fù)選框觸發(fā)事件給input賦值
本文給大家介紹的是一段十分實用的代碼,使用jQuery實現(xiàn)勾選復(fù)選框觸發(fā)事件給input賦值,在制作項目的時候經(jīng)常需要用到此功能,這里分享給大家。2015-02-02
jquery UI Datepicker時間控件的使用方法(加強版)
這篇文章繼續(xù)介紹了jquery UI Datepicker時間控件的使用方法,主要關(guān)于Datepicker插件的介紹和使用,并分享了第一個日歷插件的使用實例,需要的朋友可以參考下2015-11-11

