向上滾動或者向下滾動分頁異步加載數據(Ajax + lazyload)[上拉加載組件]

快速瀏覽更多在線 Demo

想查看源代碼，可以自行F12，或在github中直接查看源碼，或者歡迎直接留言。

/**** 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("<div class='ui-no-msg'>" + opt.empty_msg + "</div>");
        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;
        }*/
        return opt.page_no;
    }

    //基礎參數
    var page = get_return_page() * 1;
    var page_up = page;
    var page_down = page;

    //異步加載數據
    var loadmore = function (page, pos) {
        var loading = "<div class='ajax-loading'>" + opt.loading_msg + "</div>";
        $.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("<div class='ui-no-msg'>數據異常，請刷新重試！</div>");
                $("<div class='ui-no-msg'>數據異常，請刷新重試！</div>").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);
                }
            }

        });
    }

    //懶加載
    function lazyLoadImgs(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 < opt.page_count) {
                        page_down++;
                        loadmore(page_down, 'after');
                    } else {
                        $(".ajax-ending").remove();
                        $("<div class='ajax-ending'>" + opt.ending_msg + "</div>").appendTo(This);
                        $(".ajax-ending").delay(2000).hide();
                    }
                }
            }
        });
    }

}

使用方法

    $("#obj").list_data({
        ajaxdata_url    : data.php,
        page_count      : 100,
        page_val_name: 'current_page',
        page_no: 2,     
    });