I'm building a phonegap app using the Ionic Framework. So far everything works great, but I have an issue with the ion-infinite-scroll directive: I want to build an image grid, where additional images get loaded when you scroll down (that's what I need the infinite scroll for). Everything gets called as it should be and the new images are loaded correctly.
My problem is: Everytime a new row of images is added, the scrolling stops. So if I give the grid a little push, the page should continue to scroll down and add the images on the fly (or placeholders, if loading the images takes more time).
So here's the HTML:
<div class="row" ng-repeat="img in imgs" >
<div class="col" ng-repeat="src in img">
<img ng-src={{src}} width="100%" ng-click="showFullscreen( $parent.$index*3 + $index )" adjust-image/>
</div>
</div>
<ion-infinite-scroll ng-if="!noMoreItemsAvailable" icon="ion-ios7-reloading" on-infinite="loadMore()" distance="25%"></ion-infinite-scroll>
And here's loadMore() in app.js:
$scope.loadMore = function(){
$scope.noMoreItemsAvailable = false;
var last = $scope.imgs.length*3;
if(last < imgData.length){
$scope.imgs.push([]);
for(var i = 0; i <= 2; i++) {
$scope.imgs[$scope.imgs.length-1].push(imgData[last + i]);
}
}else{
$scope.noMoreItemsAvailable = true;
}
$scope.$broadcast('scroll.infiniteScrollComplete');
}
Basically, I have a two-dim array containing rows and three images per row.
Do you know how I can prevent the page-scroll from stopping? When all available images are loaded, scrolling works as it should.