Logic Delight

明日のワシは忘れてしまうから、コードにはコメントを書くのです。

今さらながら、WebサイトのAutoPagingをやってみた

過去に作った個人用ホームページを再利用し、AutoPaging用jQueryプラグインを使ってスルスルページングを実装してみた。利用したプラグインはjScroll。

pklauzinski/jscroll

jScroll - a jQuery Plugin for Infinite Scrolling / Lazy Loading

ハマったポイント

ページ最後のaタグが問答無用で次頁に置き換わる

nextSelector オプションがデフォルトだと 'a:last' だったので当然の挙動。最後のaタグが次ページへのリンクじゃなかったのと、次ページを示すリンクは最後のページには存在しなかったりするので、次のページへリンクのaタグに class="next" を追加して、jscroll()のパラメータを nextSelector: 'a.next' とすることで解決。

自動で次ページを読み込め読み込むほど挙動が怪しく

何ページ目を最初に表示してもAutoPagingされるようにするために、各ページのHTMLにjScrollの起動スクリプトを埋め込んだが、次ページを読み込んだ際 contentSelector がデフォルトの "" だとHTMLタグの配下すべてがDOMに追加されてしまうようなので、次々に読み込んだページのjscrollスクリプトが発動していた模様。コンテンツ部分を括っていたdivに class="content" を追加して、 jscroll()のパラメータを contentSelector: '#content' とすることで解消。

雑感

いやー、それにしても大昔に自分で書いたHTMLは汚かった。リファクタしても自己満足の誰得なので、手を入れた箇所しか改善しませんでした。たとえ便利なライブラリでも、オプションのデフォルトのままでは想定した動作にならなかったりするので要注意、という当たり前の感じで、久しぶりに軽く手と頭を動かしましたとさ。