Infinite Scroll（cdn版）を使って無限スクロールする

Infinite Scrollをcdnで読み込む

Infinite Scrollはプラグインもあるけど、cdnから読みこんでも無限スクロールできるようになる。

公式サイトはおそらくここです Infinite Scroll

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-infinitescroll/2.1.0/jquery.infinitescroll.min.js"></script>

Infinite Scrollの基本形

<script>
$(function(){
$('#list').infinitescroll({
    navSelector     : '.pagination-next',
    nextSelector    : '.pagination-next-link',
    itemSelector    : '.entry-card-wrap'
});
</script>

これでスクロールしてページ下部にいくと自動で記事一覧が読み込まれ無限スクロールされる。

Infinite Scrollでクリックしたら記事一覧を読みこむようにする

無限スクロールをクリックで制御したい場合は、別途コードを追加する必要がある。

<script>
$(function(){
$('#list').infinitescroll({
    navSelector     : '.pagination-next',
    nextSelector    : '.pagination-next-link',
    itemSelector    : '.entry-card-wrap',
	loading: {
		img: null,
        msgText: ""		
}
},function(newElements){
        $(newElements).hide().delay(100).fadeIn(600);
	    $(".pagination-next").appendTo("#list").delay(300).fadeIn(600);
});

$('#list').infinitescroll('unbind');
$(".pagination-next-link").click(function(){
$('#list').infinitescroll('retrieve');
        return false;
});
});
</script>

あとがき、課題等

Infinite Scrollで要素が読み込まれるときに、gif画像が表示される。非表示のやり方は不明だったため今後の課題。