2

私はWebアプリケーションを開発しています。ログイン後、ユーザーは受信トレイページにリダイレクトされ、
そこでユーザーはそれぞれ数百のレコードを持つ多くのウィジェットを見つけることができます。
そのため、ログインに成功した後、受信トレイページを開くのに時間がかかりすぎます。パフォーマンスの問題が非常に多くなります。

だから私は各ウィジェットにいくつかの（5-10）レコードを表示したい

そして、ページがバックエンドにロードされた後（ユーザーは知らない）、リクエストはまだ処理中であり、レコードをフェッチしてウィジェットレコードに追加します。

例えば。グーグル画像を開いてクリケットを検索すると、画像付きのページが表示され、下にスクロールするだけで、ajaxリクエストが実行されてWebページに応答が追加されていることがわかります。

ただし、ページ全体が読み込まれるまで待機していません。

同じ方法でアプリケーションを開発する必要があります。

どんなアイデアも高く評価されており、サンプルコードもあります。

4

2 に答える 2

3

チャウダリーさん、これでうまくいくはずです。

バックエンドでリクエストを処理するために何かが必要になります。Java、PHP、Pythonなどを使用したかどうかを指定しなかったため、PHPを使用しました。これが私が最もよく知っていることです：D

擬似コード （loadmore.jsp）

Begin 

widget = URL(widget) //the widget id or name
page = URL(page) //the page being retrieved

switch (widget) 
{
case "widget1":
data_for_widget1 = paginated_query1(page)
print data_for_widget1
break

case "widget2":
data_for_widget2 = paginated_query2(page)
print data_for_widget2
break

default :
print "Invalid Widget"
break

}

End

PHPバージョン 

<?php
if (isset($_GET['page'])) {
    $widget = $_GET['page'];
    $page = $_GET['page'];
    switch ($widget) {
        case "MyWidget1": //dynamic example
            $manyManyItems; //A massive array of items
            $pages = array_chunk($manyManyItems, 5); //break it up into chunks of 5 items
            if( array_key_exists ($pages[$page]) )
                for ($i = 0; $i < count($pages[$page]); $i++) { //load those chunks
                    echo '<div class="item">'.$pages[$page][$i].'</div>';
                }
            else {
                echo "zero"; //code word that tells ajax that there is nothing more to load
            }
            break;

        case "MyWidget2": //manual example
            if($page==1) { //loads the first chunck manually
                echo '<div class="item">dynamic content 1</div>';
                echo '<div class="item">dynamic content 2</div>';
                echo '<div class="item">dynamic content 3</div>';
            }
            elseif($page==2) { //loads the next batch
                echo '<div class="item">dynamic content 1</div>';
                echo '<div class="item">dynamic content 2</div>';
                echo '<div class="item">dynamic content 3</div>';
            }
            else
                echo "zero"; //code word that tells ajax that there is nothing more to load
            break;

        default:
            echo "zero"; //code word that tells ajax that there is nothing more to load
    }
}
?>

HTML 各ウィジェットは次のようになります

<div id="MyWidget1" class="widget" data-widgetPage="0">
   <div class="item">default content</div>
   <div class="item">another default content</div>
   ...
   <div class="loadmoreajaxloader" style="display:none;"><center>Loading...</center></div>
</div>

Javascript

<script type="text/javascript">
$(".widget").scroll(function()
{
    if($(this).scrollTop() == $(this).height() - $(this).height())
    {
        var nextPage = eval($(this).attr("data-widgetPage") + 1);
        $(this).find('.loadmoreajaxloader').show();
        $.ajax({
        url: "loadmore.php?widget="+$(this).attr("id")+"&page="+nextPage,
        success: function(html)
        {
            if(html != "zero")
            {
                $(this).append(html);
                $(this).('.loadmoreajaxloader').hide();
            }else
            {
                $(this).find('.loadmoreajaxloader').html('<center>No more posts to show.</center>');
            }
        }
        });

        $(this).attr("data-widgetPage", nextPage);
    }
});
</script>

アプリでの成功。

于 2012-09-28T10:44:47.773 に答える
0

次のサイトから、次の回答が私の要件に合っていることを知りました。Jqueryエンドレススクロール

于 2012-10-08T05:10:34.440 に答える