AngularJS如何使用过滤器对图像进行延迟加载

Question

我正在开发一个角度应用程序，其中主页面加载1000个图像，但用户一次只能查看20个。 我的列表中还有几个过滤器，因此可以根据不同的标准对其进行过滤和排序。

我已经尝试过http://binarymuse.github.io/ngInfiniteScroll/#和http://ngscroller.herokuapp.com/，但似乎都没有那么好用。

Ngscroller确实可以工作，但是当我尝试应用我的过滤器时，它会中断。 我也更喜欢这个，因为它不需要我包含jquery。 有没有可以做我需要的简单指令？ 我正在尝试加速我的网页，但如果有一些已经完成此操作的东西，我不想重新发明轮子。

这是我对ngScroller的尝试： http ：//plnkr.co/edit/r0uhV3OxT2USxmrBQk22？p = preview

<div class="content" ng-controller="MainController" ng-scroller="content">
  <ul class="list" ng-scroller-repeat="item in items | filter:idOver500k | orderBy:predicate:!reverse">
    <li class="item">{{item.text}}</li>
  </ul>
</div>

滚动工作没有过滤器和orderBy，但我正在寻找一种方法来处理所有情况。

加载页面至少需要3秒才能删除图像。 看起来只有在获得所有图像时才加载角度。 处理这个问题的最佳方法是什么？

谢谢！

Answer 1

使用ng-infinite-scroll进行演示： http ： //plnkr.co/edit/O5w0Fp

ng-infinite-scroll与ng-scroller有不同的机制。 当用户滚动到底部时，无限滚动将触发loadMore函数。 您可以自己定义loadMore函数。

我创建了一个lazyLoad过滤器，只返回由counter变量管理的部分过滤项。 滚动到底部时， counter将加1以从lazyLoad过滤器返回更多项目。

当用户通过参数更改订单时， counter将重置为1。

当counter等于1 ，它将加载前30个项目。

笔记

如果document.body的高度小于window的高度，则可能有问题，因为该方式文档将无法滚动，因此不会触发scroll事件。 您必须手动检查高度并相应地触发loadMoreItems 。

页面初始化或counter重置时会出现此问题。

我在重置计数器后添加了adjustCounter函数来运行。 ng-infinite-scroll将在内部页面加载时处理此问题。

Answer 2

在没有修复ngScroller的情况下，这似乎无法使用动态过滤器。

有问题的代码似乎在ng.Scroller.prototype.compile函数中：

var exp = carousel.getAttribute('ng-scroller-repeat');
var keys = exp.split(/\s+in\s+/);

其中ngScroller基本上拆分属性而不查看过滤器等。

一个可能的解决方法就像@Daiwei建议并在绑定之前过滤。 这不是一个糟糕的解决方案，因为无论如何这要快得多。

  app.controller('MainController', function ($scope) {
    $scope.allItems = generateItems(1000);
    $scope.items = $scope.allItems.reduce(function(previous, item){
      if (item.id > 500000)
      {
        previous.push(item);
      }
      return previous;
    },[]); 
  });

有关示例，请参阅此Plunker 。