AngularJS how to make lazy loading images with filters

Question

I am developing an angular application where the main page loads 1000 images, but the user can only watch 20 at a time. I will also have several filters on my list so that it can be filtered and sorted based on different criteria.

I tried http://binarymuse.imtqy.com/ngInfiniteScroll/# and http://ngscroller.herokuapp.com/ but none of them work so well.

Ngscroller really works, but it breaks when I try to apply filters. I also prefer this one, as it does not require me to enable jquery. Are there any simple directives that can do what I need? I am trying to speed up my web page, but I do not want to reinvent the wheel if there is something that is already doing this.

Here is my attempt with 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> 

Scroll works without filter and orderBy, but I'm looking for a method that will handle all cases.

It takes at least 3 seconds longer to load my page than when deleting images. It seems that angular only loads when all the images are received. What is the best way to handle this?

Thanks!

Answer 1

Demo with ng-infin-scroll : http://plnkr.co/edit/O5w0Fp

ng-infin-scroll has a different mechanism with ng-scroller . endless scrolling starts the loadMore function when the user scrolls down. You can define the loadMore function loadMore .

I created a lazyLoad filter to return only a portion of the filtered elements controlled by the counter variable. When scrolling down, counter will increase by one to return more items from the lazyLoad filter.

When the user changes the order of the parameter, counter will reset to 1.

When counter is 1 , it will load the first 30 elements.

Notes

It may have a problem if the height of document.body less than the height of the window , as this document will not be able to scroll, therefore it will not fire the scroll event. You must manually check the heights and trigger loadMoreItems accordingly.

The problem will occur during page initialization or counter reset.

I added the adjustCounter function to run after the reset counter. ng-infin-scroll will handle this when the page loads inside.

Answer 2

It seems like this will not work with dynamic filter without fixing ngScroller.

The violation code seems to be in the ng.Scroller.prototype.compile function:

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

Where ngScroller basically breaks an attribute without looking at filters, etc.

One possible workaround is similar to what @Daiwei offers and filters before binding. Not a bad decision, as it is much faster.

  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; },[]); }); 

See the Plunker example for an example.