滚屏加载

滚屏加载

另外一种可行的性能解决方案就是滚屏加载，又称”Endless Scrolling,“ “unpagination”，这是用于大量数据集显示的时候，
又不想表格分页，所以一般放在页面最底部，当滚动屏幕到达页面底部的时候，就会尝试加载一个序列的数据集，追加在页面底部。
在Angular社区有开源组件ngInfiniteScroll http://binarymuse.github.io/ngInfiniteScroll/index.html实现滚屏加载。下面是官方Demo：

HTML：


  

    

      {{item.score}}
      
        {{item.title}}
      
      by {{item.author}} -
        {{item.num_comments}} comments
      
      

    
    
Loading data...
  


JavaScript：
var myApp = angular.module('myApp', ['infinite-scroll']);
myApp.controller('DemoController', ['$scope', 'Reddit', function($scope, Reddit) {
  $scope.reddit = new Reddit();
}]);
// Reddit constructor function to encapsulate HTTP and pagination logic
myApp.factory('Reddit', ['$http', function($http) {
  var Reddit = function() {
    this.items = [];
    this.busy = false;
    this.after = '';
  };
  Reddit.prototype.nextPage = function() {
    if (this.busy) return;
    this.busy = true;
    var url = 'http://api.reddit.com/hot?after=' + this.after + '&jsonp=JSON_CALLBACK';
    $http.jsonp(url).success(function(data) {
      var items = data.data.children;
      for (var i = 0; i < items.length; i++) {
        this.items.push(items[i].data);
      }
      this.after = 't3_' + this.items[this.items.length - 1].id;
      this.busy = false;
    }.bind(this));
  };
  return Reddit;
}]);