時間差読み込みinfinite scroll.js

Facebook風の無限スクロールが作れるinfinite scroll
http://ascii.jp/elem/000/000/814/814095/

infinite scroll」は、スクロールしてページ下部まで移動すると、次のページを自動的に読み込んで表示するjQueryプラグインです。


<script src="jquery-1.10.2.min.js"></script>
<script src="jquery.infinitescroll.min.js"></script>
<script>
$(function(){
     $('#content').infinitescroll({
        navSelector  : "div.navigation",
            // ナビゲーション要素を指定します。
        nextSelector : "div.navigation a",
            // ナビゲーションの「次へ」の要素を指定します。
        itemSelector : "#content div.post"
            // コンテンツ要素を指定します。
    });
});
</script>
</body>
</html>

その他のオプション

<script>
$(function(){
    $('#content').infinitescroll({
        debug: true,
            // console.logに出力するデバッグメッセージを有効にする
        loadingImg   : "/img/loading.gif",
            // ローディング時のローディング画像のパスの指定
            // デフォルトのパスは: "http://www.infinite-scroll.com/loading.gif"
        loadingText  : "Loading new posts...",
            // ローディング画像に添えるテキストの指定
            // デフォルトのテキストは: "<em>Loading the next set of posts...</em>"
        animate : true,
            // コンテンツのロード時にアニメーションさせるかの指定
            // デフォルトは: false
        extraScrollPx: 50,
            // 次のコンテンツを読み込むまでのスクロール量のピクセルを指定
            // animateを有効にさせるにはこの値を必ず指定しましょう。
            // デフォルトの値は: 150
        donetext : "I think we've hit the end, Jim" ,
            // 全てのコンテンツを表示し終わったら表示させるテキスト
            // デフォルトのテキストは: "<em>Congratulations, you've reached the end of the internet.</em>"
        errorCallback: function(){},
            // 404ページがコールされたり、これ以上のコンテンツがない場合の処理
            // このオプションはバージョン1.2から追加されました。
    },function(arrayOfNewElems){
        // コールバック
});
</script>



コメントは受け付けていません。