AutoPagerizeのように自動読み込みができるjQueryプラグイン

javascript jquery

GreasemonkeyスクリプトのAutoPagerizeやFirefox add-onのAutoPagerのように、スクロールするだけで自動ページングできるjQueryプラグインを作ってみました。

※10/22 全面的に書き直したv1.0.0をリリースしました。
詳しくはhttp://lagoscript.org/jquery/autopagerを参照してください。

サンプル

$.autopager({
    nextLink   : '#nav a:last', // 次ページリンクのセレクタ
    pageElement: '#res'         // ページコンテンツ部分のセレクタ 
});

jQuery.autopager(options)

サイトに次ページの自動読み込み機能を付け加えます。

options
  • nextLink: 次ページのリンクを持つ要素へのセレクタ
  • pageElement: ページコンテンツ部分のセレクタ
  • insertBefore（任意）: ここで指定した要素の前に次ページのコンテンツが挿入される
  • pagingPoint（任意）: 自動読み込みが行われる位置指定。ページ終端からの距離（ピクセル）
  • load（任意）:　次ページが読み込まれた時に実行されるコールバック関数。"this"は挿入するコンテンツとなる。第一引数に読み込まれたページ番号が渡される。
  • success（任意）:　次ページの挿入まで成功した後に実行されるコールバック関数。"this"は挿入されたコンテンツとなる。第一引数に読み込まれたページ番号が渡される。

ソース

http://code.google.com/p/jquery-autopager/
http://jquery-autopager.googlecode.com/svn/trunk/jquery.autopager.js

(function($) {
    $.autopager = function(options) {
        var nextPageUrl;
        var requestedPages = [location.href];
        var loading = false;
        if ($.browser.msie) {
             var scrollTopElement = $('html');
             var heightElement = $(document);
        } else {
             var scrollTopElement = $(document);
             var heightElement = $('html');
        }

        options = $.extend({
            insertBefore: $(options.pageElement).next(),
            pagingPoint: 350,
            load: function() {},
            success: function() {}
        }, options);

        setNextPageUrl();

        $(window).scroll(function(){
            if (!loading && nextPageUrl && $.inArray(nextPageUrl, requestedPages) < 0 && scrollHeightRemain() < options.pagingPoint) {
                loading = true;
                requestedPages.push(nextPageUrl);
                $.get(nextPageUrl, function(data){
                    var nextPage = $('<div/>').html(data);
                    setNextPageUrl(nextPage);
                    insertPageElement(nextPage);
                    loading = false;
                });
            }
        });

        return this;

        function setNextPageUrl(context) {
            var args = [options.nextLink];
            if (context) args.push(context);
            nextPageUrl = $.apply(null, args).attr('href');
        }

        function insertPageElement(context) {
            var pageElement = $(options.pageElement, context); 
            if (pageElement) {
                options.load.call(pageElement, requestedPages.length);
                pageElement.insertBefore(options.insertBefore);
                options.success.call(pageElement, requestedPages.length);
            }
        }

        function scrollHeightRemain() {
            return heightElement.height() - scrollTopElement.scrollTop() - $(window).height();
        }
    };
})(jQuery);

参考

オプションの取り方などはAutoPagerizeを参考にさせてもらいました。