loop.js

キャッシュ付き無限スクロールを実現するJQueryライブラリ

はじめに

WebサイトのUXとして無限スクロールは既に一般的なUXとして採用されてきています。そこで制作してるサイトでもライブラリを用いて採用すると、思いのほか使い勝手が悪いことが判明し、ロジックを自作したものをライブラリとして公開するものです。このライブラリは下記の特徴（定義要件）の下で開発されたものです。

1. 再読み込み時にもこれまでに読み込んだページがリセットされない
2. 採用されたサイトにはフッターがあるためボタン操作で次のページが表示させる
3. 100行前後の軽量なライブラリである

デモ

デモは下記のページからご覧頂けます。

https://emesh0620.github.io/jquery_loop_js/

実装

html部

まずループさせたい箇所に次のコードを入力します。 なお、next_loop_btm_bodyとnext_loopを変更する際にはソースコードを変更する必要があります。

<div id = "next_loop"></div>
<span id = "next_loop_btm_body">
    <button id="next_loop_btm">もっと見る</button>
</span>

JS部

JavaScriptはたとえば次のコードになります。

<script type="text/javascript">
$(function() {
    //loop.jsの本体を呼び出す
    $('#next_loop_btm').loop_looping({
        name    : 'loop',
        url     : 'loop/$.html',
        allpage : 2,
    });

    //キャッシュをクリアしたい時に呼び出す
    $('#cache_clear').loop_looping_clear();
});
</script>

• name･･･HTMLのキャッシュ時に使う名前
• url･･･2ページ目以降のページを指示する注意点は下記の通りです。
  • かならず表示順の連番として、HTMLであれば全て同一のディレクトリ入れること。
  • 連番部分はJSに書き込む際には$で置換しておくこと。 （例えば　loop/1.html loop/2.html...と続くなら　loop/$.htmlとする）
  • なお、HTMLを吐き出すことが出来れば動的サイトなどでも構わない。
• allpage･･･ループの総ページ数をかく。最初のページを入れた値を入れること。

キャッシュをクリアしたいときには適当な場所に、

$(任意のIDまたはClass).loop_looping_clear();

を挿入すればキャッシュはクリアされます。

おわりに

このライブラリはMITライセンスにつき、ご利用の環境によってご自由に改変して頂いて結構です。例えば、キャッシュにはUNIXTimeを記録していますので一定の時間が経てばキャッシュをクリアするなどの使い方があります。