javascript - AngularJS 如何使用过滤器延迟加载图像

Question

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

谢谢!

Answer 1

ng-infinite-scroll 演示:http://plnkr.co/edit/O5w0Fp

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

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

当用户通过参数更改顺序时，counter 将被重置为 1。

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

注意事项

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

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

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