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

时间:2013-12-23 16:32:32

标签: javascript angularjs infinite-scroll

我正在开发一个角度应用程序,其中主页面加载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秒才能删除图像。看起来只有在获得所有图像时才加载角度。处理这个问题的最佳方法是什么?

谢谢!

2 个答案:

答案 0 :(得分:8)

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

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

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

当用户按参数更改订单时,counter将重置为1.

counter等于1时,它会加载前30个项目。

备注

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

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

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

答案 1 :(得分:0)

在没有修复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