WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

無限スクロール「Infinite Scroll」のカスタマイズ

github.com



オプション機能の追加

<script>
$(function(){
	$('#contents').infinitescroll({
		navSelector:  ".navigation",
		nextSelector: ".navigation a",
		itemSelector: ".article",
		dataType:     "html",
		animate:       true,
		extraScrollPx: 200, //次のコンテンツを読み込むまでのスクロール量をピクセル指定
		bufferPx       :  10, /*次をロードするタイミングを指定。ピクセルで指定する。値を大きくするとより早いタイミングでローディングが開始される*/
			loading : {
		img : "img/load.gif"
		}
	},
		function(newElements) {
	$(newElements).hide().delay(500).fadeIn(600);
		});
});
</script>

その他のオプション
https://github.com/infinite-scroll/infinite-scroll/wiki/Options



簡単に、ローディング用のGIFアニメーション画像を作成できるオンラインサービス
「Loader Generator」
loadergenerator.com




on-ze.com


homes-designers.hatenablog.com