Infinite Scroll

jsファイルはこちらのサイトよりお借りしました。2016/03/27
paulirish/infinite-scroll
https://github.com/paulirish/infinite-scroll

html

 
 

  記事内容
 
 


 


 次のページを読み込む

jQuery

$('#items').infinitescroll({
  // ここを通過するとロード
  navSelector: '#next-page',
  // 次のページへのリンク
  nextSelector: '#next-page a',
  // 読み込みを行うセレクタ
  itemSelector: '.item',
  // ローディング時のメッセージ設定
  loading: {
    // アイテムがない場合のメッセージ
    finishedMsg: '次のアイテムはありません',
    // ローディング画像
    img: 'loading.gif'
  }
  state: {
    // 基準となるページ番号（FC2ブログの場合'0'推奨）
    currPage: 0
  },
  // ページのパスを指定（FC2ブログの場合）
  path: function generatePageUrl(currentPageNumber){
    
    var url = location.href,
        frontUrl = url.substring(0, url.lastIndexOf('.html'));
    return (frontUrl + '-' + currentPageNumber + '.html');
    
    
    var url = location.href,
        frontUrl = url.substring(0, url.lastIndexOf('.html'));
    return (frontUrl + '-' + currentPageNumber + '.html');
    
    
    var url = location.href;
    return (url + '&page=' + currentPageNumber + '');
    
    
    var url = location.href;
    return (url + '&page=' + currentPageNumber + '');
    
    
    return ('<%url>/page-' + currentPageNumber + '.html');
    
  }
});

………？
既にこの段階でつまずきました。
そもそも、Infinite Scrollは次ページのどこを読み込んでいるものなのか、私は分かりませんでした。

ので、私は記事内容のところ全てにhtmlすべてを放り込むという愚策を行いましたが、当然動かない。

ウーン、これは次ページのhtmlすべて丸々読み込んでいるのでしょうか？
なら、トップエントリーの変数（ ＜!--topentry--＞）これだけじゃあ足りないよなぁ、という考え故の行動です。
そんな訳がなかったですね。

記事内容は、無論自ブログの＜!--topentry--＞～＜!--/topentry--＞内に収まっているhtmlの事です。
次ページで読み込みたい部分だけを#itemで包んでます。とても分かりやすいですね。

さて、なら、話が早いですね。
topentryの変数以外をコピペして、貼り付けました。



スクロールしないと無いので画像では見えませんが、下の方js読み込み様のタグも貼っています。
これで自動ページ読み込みが出来た筈です。

が、ページを読み込んでみたところ…

ウーン、動かない。
まったく動かない。
スクリプトのエラーを吐きだす文字すらない。

という事は、スクリプト自体が読み込まれて無いのかも？
と思いまして、試しに先ず、動くのかやってみました。

＜script＞
$('#items').infinitescroll({
navSelector : "#next-page",
nextSelector : "#next-page a",
itemSelector : "#items",
dataType : "html",
});
＜/script＞

これだと、問題なく動いたのですが、2ページ目を読み込みませんでした。
このJSを紹介して頂いてるブログさんの改訂後の文章に納得してみたり。

まぁ、読み込みは正常に済んでるみたいなので、思い当たる原因といえば、Infinite Scrollのバージョン違いぐらいでしょうか。
という訳でググってみたところ、下記のブログさんへ辿り着きました。

[jQuery]infinitescrollが正しくpage番号をincrementしてくれない件への対処｜ARKの技術メモ
http://arkmemo.blogspot.jp/2013/04/jqueryinfinitescrollpageincrement.html

うーんうーん。 とりあえず、よく分からないのですがハイライトされている記述を追記すればいけるだろうか。という安直な理由で、意味すら分からず追記。(まぁ、間違ってたら読み込まないし、動かないし、最悪ブログの表示がされなくなるだけじゃないか、という解釈)

そしたら無事、動きました。
問題なく２ページ移行も読み込めてます。

最終的にタグはこうなりました。

はっきり言って、動けばいいやぐらいの感覚じゃないと不味いかも知れないです。
私のブログのような1カラムの単純な構成では動きましたが、他のレイアウトだとどうなるか分からないです。
まぁ私は動けばいいんですけどね。