/****

desc : 分頁異步獲取列表數據，頁面向上滾動時候加載前面頁碼，向下滾動時加載后面頁碼

ajaxdata_url ajax異步的URL 如data.php

page_val_name ajax異步的URL中的頁碼參數名 如pageno

page_no 初始加載頁碼，默認1 [如2,則與前面兩參數結合為data.php?pageno=2]

is_lazyload 是否開啟懶加載

page_count 總頁數

empty_msg 沒有數據的時候提示(可傳輸圖片)

ending_msg 最大頁碼顯示提示

***/$.fn.list_data= function(options) {//參數

var This = $(this);var flag = false;//flag為false時為初次加載，防止不斷加載

var defaults ={

ajaxdata_url:‘‘,

page_val_name:‘current‘,

page_no:1,

page_count:‘‘,

is_lazyload:true,

loading_msg:‘加載中...‘,

empty_msg:‘沒有相關數據！‘,

ending_msg:‘沒有更多數據了!‘};var opt =$.extend(defaults, options)//沒有數據的提示語

if (opt.page_count <= 0) {

This.html("

" + opt.empty_msg + "");return true;

}//獲取頁碼，暫時不會用到

var get_return_page = function() {/*var url = location.href;

var page = ‘‘;

if (url.indexOf("#") > 0) {

var arr = url.split("#");

var pagestr = arr[1];

if (pagestr.indexOf("_") > 0) {

var arr2 = pagestr.split("_");

var page = arr2[0];

}

}

if (page == ‘‘ || page == undefined) {

return 1;

} else {

return page;

}*/

returnopt.page_no;

}//基礎參數

var page = get_return_page() * 1;var page_up =page;var page_down =page;//異步加載數據

var loadmore = function(page, pos) {var loading = "

" + opt.loading_msg + "";

$.ajax({

type:"GET",

url: opt.ajaxdata_url+ "&" + opt.page_val_name + "=" +page,

beforeSend:function() {

$(".ajax-loading").remove();

$(".ui-no-msg").remove();if (pos == ‘before‘) {

$(loading).insertBefore(This);

}else{

$(loading).insertAfter(This);

}

$(".ajax-loading").show();

flag= true;

},

dataType:"html",

error:function() {//This.html("

數據異常，請刷新重試！");

$("

數據異常，請刷新重試！").appendTo(This);

$(".ajax-loading").remove();

},

success:function(content) {

flag= false;

content=$.parseHTML(content);if (pos == ‘before‘) {

$(content).prependTo(This);

}else{

$(content).appendTo(This);

}

$(".ajax-loading").remove();

$(".ui-no-msg").remove();//是否開啟懶加載

if (opt.is_lazyload == true) {

lazyLoadImgs(This);

}

}

});

}//懶加載

functionlazyLoadImgs(e) {

e.find("img").lazyload({

effect:"show",

event:"sporty"});var timeout = setTimeout(function () { e.find("img").trigger("sporty") }, 500);

}//初始加載

if (flag == false) {

loadmore(page,‘after‘);

$(window).scroll(function() {var scrollTop = $(this).scrollTop();var scrollHeight =$(document).height();var windowHeight = $(this).height();//滾動到頂部

if (scrollTop == 0) {if (page_up > 1) {

page_up--;

loadmore(page_up,‘before‘);//如不需要向上滾動加載，則注釋掉此行

}

}else{//滾動到底部

if (scrollTop + windowHeight >= (scrollHeight - 200)) {if (page_down

page_down++;

loadmore(page_down,‘after‘);

}else{

$(".ajax-ending").remove();

$("

" + opt.ending_msg + "").appendTo(This);

$(".ajax-ending").delay(2000).hide();

}

}

}

});

}

}

總結

以上是生活随笔為你收集整理的ajax实现向上正在加载,向上滚动或者向下滚动分页异步加载数据(Ajax + lazyload)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。