js滾動加載插件

時間 2019-11-13

原文原文鏈接

function $xhyload(o) {
    var that = this;
    if (!o) {
        return;
    } else {
        that.win = $(o.config.obj);
        that.qpanel = $(o.config.oPanel);
        that.loadding = $(o.config.loadding);
    }
    that.config = $.extend({}, this.config, o.config);
    that.win.scrollTop(0, 0);
    that.win.bind("scroll", that, that.scrollHandler);

}
$xhyload.prototype = {
    config: { obj: window, delay: 500, curPos: 0, oriPos: 0, isScrolling: false, marginBottom: 100, oPanel: "#visitor_con", loadding: "#loadding", func: null },
    scrollHandler: function (e) {
        var edata = e.data; cfg = edata.config;
        cfg.curPos = edata.win.scrollTop();
        if ($(window).height() + $(window).scrollTop() >= $(document.body).height() - cfg.marginBottom) {
            if (cfg.isScrolling == true) return;
            cfg.isScrolling = true;
            setTimeout(function () { cfg.isScrolling = false; }, cfg.delay);
            if (cfg.curPos - cfg.oriPos > 0) {
                $(edata.loadding).show(); //加載提示
                setTimeout(function () {
                    cfg.func(function (data) {
                        edata.qpanel.append(data);
                    });
                    $(edata.loadding).hide();
                }, 500)
            }
        }
        cfg.oriPos = cfg.curPos;
    },
}
$xhyload.prototype.constructor = $xhyload;

var visitor = new $xhyload({ config: { obj: window, oPanel: "#visitor_con", loadding: "#loadding", delay: 500, func: $ue_visitor } });

//===================================javascript

<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>demo</title>
    <script src="1.9.js" type="text/javascript"></script>
    <style type="text/css">
        div#Loadding {
            text-align: center;
            margin-top: 10px;
            display: none;
            font-weight: bold;
            color: Red;
        }

        div.content {
            width: 100%;
            height: 1200px;
            border-bottom: 1px solid gray;
            font-weight: bold;
            color: Red;
            text-align: center;
        }
    </style>
    <script type="text/javascript">
        if (!NeuF) var NeuF = {};
        NeuF.ScrollPage = function (obj, options, callback) {
            var _defaultOptions = { delay: 500, marginBottom: 100 }; //默認配置：延遲時間delay和滾動條距離底部距離marginBottom
            options = $.extend(_defaultOptions, options);
            this.isScrolling = false; //是否在滾動
            this.oriPos = 0; //原始位置
            this.curPos = 0; //當前位置
            var me = this; //頂層
            var $obj = (typeof obj == "string") ? $("#" + obj) : $(obj);
            //綁定滾動事件
            $obj.scroll(function (ev) {
                me.curPos = $obj.scrollTop();
                if ($(window).height() + $(window).scrollTop() >= $(document.body).height() - options.marginBottom) {
                    if (me.isScrolling == true) return;
                    me.isScrolling = true;
                    setTimeout(function () { me.isScrolling = false; }, options.delay); //重複觸發間隔毫秒;
                    if (typeof callback == "function") callback.call(null, me.curPos - me.oriPos);
                };
                me.oriPos = me.curPos;
            });
        };
        $(function () {
            window.scrollTo(0, 0); //每次F5刷新把滾動條置頂
            //marginBottom表示滾動條離底部的距離，0表示滾動到最底部才加載，能夠根據須要修改 
            new NeuF.ScrollPage(window, { delay: 1000, marginBottom: 0 }, function (offset) {
                if (offset > 0) {
                    $("#Loadding").show(); //加載提示
                    setTimeout(function () {
                        //這裏就是異步獲取內容的地方，這裏簡化成一句話，能夠根據須要修改
                        $("#divContainer").append($("<div class='content'>第「" + ($(".content").size() + 1) + "」頁內容</div>"));
                        //內容獲取後，隱藏加載提示
                        $("#Loadding").hide();
                    }, 1000);
                }
            });
        });
    </script>
</head>

<body>
    <div id="divContainer">
        <div class="content">
            這裏是內容，嘗試滾動，加載下一頁內容。若是是大屏幕顯示器，<br />請把CSS div.content 高度調高，以便看到滾動效果 </div>
    </div>
    <div id="Loadding">
        正在加載，請稍候 ...</div>
</body>

</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。