次のページを自動で読み込む無限スクロール

taka_oj

2017年10月13日

次のページを自動で読み込む無限スクロールのスクリプトの紹介です。

次のページへのリンクを自動で読み込んで処理をしてくれます。

↓以下が実際のソースサンプルです。

▼JavaScript

$(function() {
    // 使用する要素名
    var IScontentItems = '.list_item';
    var IScontent = '.list';
    var ISlink = '.page_next';
    var ISlinkarea = '.page';
    var loadingFlag = false;

    $(window).on('load scroll', function() {

        if(!loadingFlag) {
            var winHeight = $(window).height();
            var scrollPos = $(window).scrollTop();
            var linkPos = $(ISlink).offset().top;
 
            if(winHeight + scrollPos > linkPos) {
                loadingFlag = true;
 
                var nextPage = $(ISlink).attr('href');
                $(ISlink).remove();

                $.ajax({
                    type: 'GET',
                    url: nextPage,
                    dataType: 'html'
                }).done(function(data) {
                    var nextLink = $(data).find(ISlink);
                    var contentItems = $(data).find(IScontentItems);

                    $(IScontent).append(contentItems);
 
                    if(nextLink.length > 0) {
                        $(ISlinkarea).append(nextLink);
                        loadingFlag = false;
                    }
                }).fail(function () {
                    alert('ページの取得に失敗しました。');
                });
            }
        }
    });
});

▼HTML