jquery - ページスクロール時にリピーターDBデータを読み込む

Question

私は pinterest.com のような笑顔で働いています。

私のプロジェクトでは、Visual Studio 2010 をリピーター、MS SQL DB、masonry jquery プラグインと共に使用しています。

すべてが正常に機能していますが、大きな問題は、リピーターがすべてのデータを一度にロードしていることです。DB から最初の 10 個の pics レコードをロードし、ユーザーがページをスクロールして終了し、次の 10 個の pics レコードをロードするなど..インフィネットページのようにFacebook や pinterest.com と同じです。SqlDataSource コンポーネントを使用して DB からデータを取得しました。

この問題を解決するのを手伝ってください。提案、アイデア、またはリンクは大歓迎です。

ライブページのデモはこちらwww.bhinderblink.com

ページヘッダーのコーディング....

<script type="text/javascript">
    $(function () {
        $('#container').masonry({ // options 
            itemSelector: '.item', columnWidth: 240,
            isAnimated: true,
            animationOptions: {
                duration: 750,
                easing: 'linear',
                queue: false
            }
        });
    });

    $(window).scroll(function () {
        if ($(window).scrollTop() == $(document).height() - $(window).height()) {
            alert("end of the page");
        }
    });
</script>

ページ本文開始.....

<form id="form1" runat="server">
<div id="topBanner">
</div>

<asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1">
    <HeaderTemplate>
    </HeaderTemplate>
    <ItemTemplate>
        <div id="container">
            <div class="item">
                <a id="a" href="#">
                    <asp:Image ID="myimage" runat="server" ImageUrl='<%#"~/" + Eval("pic_path") + Eval("pic_name") + ".jpg" %>' />
            </div>
    </ItemTemplate>
    <FooterTemplate>
    </FooterTemplate>
</asp:Repeater>

<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
    SelectCommand="SELECT pic_name, pic_path FROM pic_info"></asp:SqlDataSource>
</form>