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 。