Infinite Ajax Scrollを入れて無限スクロールやってみた。



Infinite Ajax Scrollとは、スクロールするだけで、次のページがでるjQueryのプラグインです。無限スクロールをするにはどうしたらいいのでしょうか。

ダウンロード

Infinite Ajax Scroll, a jQuery plugin — FIEG

設置方法

[html]

<script type="jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="jquery.ias.min.js"></script>

[/html]

html文にjQueryとInfinite Ajax Scrollを読み込む場所を指定します。

[code]

jQuery.ias({
container : ‘.listing’,
item: ‘.post’,
pagination: ‘#content .navigation’,
next: ‘.next-posts a’,
loader: ‘<img src="images/loader.gif"/>’
});

[/code]

Script文です。各オプションの説明は以下です。

オプション

jQuery系のInfinite Ajax Scrollで無限スクロール | Monkey Seven’sの図解がわかりやすいです。

container

コンテンツ全体のセレクターを指定します。

item

コンテンツ内にあるアイテムのセレクターを指定します。

pagination

ページリンク全体のセレクターを指定します。

next

次のページのリンクのセレクターを指定します。

noneleft

Default:false
ロードを繰り返して最終的に終了したときに表示されるメッセージが含まれています。

loader

Default:&lt;img src="images/loader.gif"/>
ロード中グルグル回る画像のパスを指定します。次のページが出るまで、画像が表示されます。

loaderDelay

Default:600
ミリセカンド。次のページのアイテムをレンダリングする前にロードを遅らせます。実際には、アイテム自体は、表示されるまえに読み込まれています。

triggerPageThreshold

Default: 3
「Load more items」と書かれているリンクが表示されるまでの読み込み回数です。「Load more items」を押すと次の読み込みが開始されます。

trigger

Default:”Load more items”
「Load more items」の文字を変更できます。

thresholdMargin

Default:0
デフォルトでは最新のアイテムまでスクロールする時、新しいアイテムをロードを開始する。thresholdMarginは、より早く新しいアイテムをロードすることができるオフセットを設定できる。オフセットは、基準からの差の値。この場合、オフセットは負の値で設定する。-250と設定すれば、最後のアイテムがスクロールされる250px前でロードを開始する。

こんな使い方もできるのか

Google Analyticsとの共用

Google Analyticと共用することができます。

[html]

jQuery.ias({
container : ‘.listing’,
item: ‘.post’,
pagination: ‘#content .navigation’,
next: ‘.next-posts a’,
loader: ‘<img src="images/loader.gif"/>’,
onPageChange: function(pageNum, pageUrl, scrollOffset) {
/ This will track a pageview every time the user
/ scrolls up or down the screen to a different page.
path = jQuery(‘<a/>’).attr(‘href’,pageUrl)[0].pathname.replace(/^[^/]/,’/’);
_gaq.push([‘_trackPageview’, path]);
}
});

[/html]

jQuery Masonryとの共用

jQuery Masonry:http://masonry.desandro.com/.との共用ができます。

[html]

jQuery.ias({
container : ‘.listing’,
item: ‘.post’,
pagination: ‘#content .navigation’,
next: ‘.next-posts a’,
loader: ‘<img src="images/loader.gif"/>’,
onLoadItems: function(items) {
/ hide new items while they are loading
var $newElems = $(items).show().css({ opacity: 0 });
/ ensure that images load before adding to masonry layout
$newElems.imagesLoaded(function(){
/ show elems now they’re ready
$newElems.animate({ opacity: 1 });
$(‘.listing’).masonry( ‘appended’, $newElems, true );
});
return true;
}
});

[/html]

コメントを残す