谷歌风格的页面加载，批量记录没有在加载，显示一些和获取保留在后面？

Question

我正在开发一个web应用程序，登录后用户被重定向到收件箱页面，

在那里，他会发现许多小部件，每一个都有数百条记录。

因此，在登录success.Very后打开收件箱页面需要花费太多的时间，性能问题很多。

因此，我想在每个小部件中显示一些(5-10)记录。

在页面加载到后端(用户不知道)之后，请求将继续处理，并获取记录并将它们附加到小部件记录中。

例如：如果你打开谷歌图片并搜索蟋蟀，它会用图片显示页面，如果你只向下滚动，你就会知道ajax请求正在进行，并将响应附加到网页，

但是它不会等到整个页面被加载。

我必须以同样的方式开发我的应用程序。

任何想法都是非常赞赏的，并且示例代码也是如此。

Answer 1

我从以下网站得知以下答案符合我的要求。Jquery无休止滚动

Answer 2

这应该对你有用，Mr.Chowdary。

您需要一些东西来处理后端的请求。由于您没有指定您是使用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
    }
}
?>

每个小部件的都可以如下所示

<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>

成功的应用程序。