無限スクロールを実装してみる

2017.06.03

一定位置までスクロールすると、次のページのコンテンツを自動で読み込む処理を実装してみます。

サンプルコード

今回は以下の5ページ用意しました。

各ページコンテンツの下に次のページへのリンクを配置しています。(5ページ目は次のページがないので外しています。)

1ページ目

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="contents">
    <ul class="list">
        <li class="list__item">
            <img src="img/01.jpg" alt="" />
        </li>
        <li class="list__item">
            <img src="img/02.jpg" alt="" />
        </li>
        ～ 略 ～
        <li class="list__item">
            <img src="img/10.jpg" alt="" />
        </li>
    </ul>
 
    <div class="pager">
        <a class="pager__next" href="index2.html">次へ</a>
    </div>
</div>

5ページ目

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="contents">
    <ul class="list">
        <li class="list__item">
            <img src="img/41.jpg" alt="" />
        </li>
        <li class="list__item">
            <img src="img/42.jpg" alt="" />
        </li>
        ～ 略 ～
        <li class="list__item">
            <img src="img/50.jpg" alt="" />
        </li>
    </ul>
</div>

次のページの.list__itemを取得して、.list内に追加するようにします。

JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
$(function() {
    // 使用する要素名
    var IScontentItems = '.list__item'; // 取得する要素
    var IScontent = '.list'; // 取得要素を追加するコンテンツ
    var ISlink = '.pager__next'; // 次のページのリンク
    var ISlinkarea = '.pager'; // 次のページのリンクの親要素
    var loadingFlag = false; // 読み込み中はtrueにして、複数回発生しないようにする
 
    $(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; // 次のページがない場合はloadingFlagをtrueにしたままにして、処理を発生しないようにする
                    }
                }).fail(function () {
                    alert('ページの取得に失敗しました。');
                });
            }
        }
    });
});

次のページの読み込みタイミングは12～16行目で設定していて、次のページのリンクが画面内に表示されたら読み込みを開始するようにしています。
次のページの要素を表示する際、次のページのリンクも合わせて変更しています。
無限スクロールのデモページ
　

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

Category

Tag

Recent

2025年4月
日 月 火 水 木 金 土
 12345
6789101112
13141516171819
20212223242526
27282930