无限滚动：从数据库加载所有数据并滚动显示更多

Question

我在我的项目中使用无限滚动。首先，它将从 MySQL 数据库中获取少量记录并显示在页面上。一旦页面向下滚动，它就会对服务器进行 ajax 查询并加载更多数据。

是否可以一次从 mysql 数据库中以 json 格式获取所有数据，然后在客户端执行更多加载。所以，基本上我不想向数据库发出 ajax 请求。

如果我在页面滚动上发出 ajax 请求，这里的代码可以正常工作。

flag = true;
$(window).scroll(function() {
    if($(window).scrollTop() + $(window).height() == $(document).height()){
        first = $('#first').val();
        limit = $('#limit').val();
        no_data = true;
        if(flag && no_data){
            flag = false;
            $('#loader').show();
            $.ajax({
                url : 'ajax_html.php',
                method: 'post',
                data: {
                   start : first,
                   limit : limit
                },
                success: function( data ) {
                    flag = true;
                    $('#loader').hide();
                    if(data !=''){

                        first = parseInt($('#first').val());
                        limit = parseInt($('#limit').val());
                        $('#first').val( first+limit );
                        $('#timeline-conatiner').append( '<li class="year">'+year+'</li>');

                        $('#timeline-conatiner').append( data );
                        year--;
                    }else{
                        alert('No more data to show');
                        no_data = false;
                    }
                },
                error: function( data ){
                    flag = true;
                    $('#loader').hide();
                    no_data = false;
                    alert('Something went wrong, Please contact admin');
                }
            });
        }


    }
}); 

Answer 1

这是未经测试的，只是该方法的一个示例，抱歉，我没有时间提供完整的示例，但这应该会给您一些想法。

 //data cache
 var cache = ['one','two', 'three' .....];
 //current location in cache
 var current = 0; 
 //ajax request object
 var request;

 if($(window).scrollTop() + $(window).height() == $(document).height()){
      var cache_total = cache.length;
      //add next item to page & increase the current pointer
      $('#timeline-conatiner').append( cache[current] );
      ++current;

      if( current - cache.length < 50 ){
           //if we only have 50 items not shown in cache pull next results with ajax and add to cache

           if( !request ){
                //also youll want to keep track if you have a pending request that hasn't returned yet, to prevent race conditions.
                request = $.ajax( .... ).success( function( data ){
                     $.extend( cache, data ); //or push each if you like
                }).always( function(){
                     request = false; //should be false on finish but just because.
                });
            } //end if request

       //make sure to properly offset the data using the total in the cache to prevent pulling duplicates. eg SELECT ... LIMIT {cache.length}, 50
      } // end if cached
 } //end scroll

看到上面的问题是用户需要等待 ajax 调用完成，这实际上将其变成了一个同步请求（比如重新加载页面）。您希望像 ajax 那样保持异步。因此，不是显示 ajax 的结果，而是缓冲它们并保留一些未显示的数据。然后滚动显示一些缓冲数据，然后填充缓存备份。

显然，这使得编码变得更加复杂，但优点是您不需要一次提取大量数据，并且用户不会因停止 ajax 请求而延迟。您必须平衡请求所花费的时间与缓存中的数据量，以便您始终拥有一些数据。这取决于 data 需要多少空间来渲染以及 ajax 查询需要多长时间。

Answer 2

我会说你根本不需要无限滚动器（或任何东西）来做你想做的事......但是因为你已经很好地工作了，我怀疑你可能会决定你想要那种“延迟加载”类型的功能回到某个时候你可以做懒惰的事情......

只需尝试在您的示例中使用第一个和限制参数值...

说... 第一个 = 0 和 限制 = 一些非常大的数字...

我认为你可以很容易地设置一些值并在页面加载时强制执行单个 ajax 调用。

Answer 3

如果所有数据都已检索并添加到 DOM，那么以下脚本可能会有所帮助。首先将hidden 类添加到额外元素。创建 DOM 后运行此脚本。

$(".elements").each(function(index, el) { // `elements` is the common class for all elements on which this functionality is to be done
    if (index >= maxLimitToShow) { // maxLimitToShow - number of elements to show in the beginning
        $(el).addClass("hidden"); // for extra elements
    }
});

为hidden类添加css

.hidden {
    display: none;
}

并检查滚动何时到达页面底部以显示更多项目。

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() == $(document).height()) {  // checks if scroll reached at bottom
       var elements = $(".elements.hidden"); // fetch all hidden elements
       elements.each(function (index, el) {
         if (index < singleRowLimit) { // singleRowLimit  - number of elements to show in one scroll
             $(el).removeClass('hidden');
         }
     });
   }
});

编辑 - 不使用 CSS - 隐藏/显示

如果所有数据都已检索并添加到 DOM，那么以下脚本可能会有所帮助。首先将hidden 类添加到额外的元素中。创建 DOM 后运行此脚本。

$(".elements").each(function(index, el) { // `elements` is the common class for all elements on which this functionality is to be done
    if (index >= maxLimitToShow) { // maxLimitToShow - number of elements to show in the beginning
        $(el).addClass("hidden").hide(); // for extra elements
    }
});

并检查滚动何时到达页面底部以显示更多项目。

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() == $(document).height()) {  // checks if scroll reached at bottom
       var elements = $(".elements.hidden"); // fetch all hidden elements
       elements.each(function (index, el) {
         if (index < singleRowLimit) { // singleRowLimit  - number of elements to show in one scroll
             $(el).removeClass('hidden').show();
         }
     });
   }
});