I am new in Angular world, I am using ngInfiniteScroll to load more data after every scroll. I implemented in and it's working fine.Currently it respond instantly, But I want a delay(1 second) on every scroll with loading image, I did Google but didn't get any solution.
Can anybody point me, how to get this issue?
Here in my Controller code
var app = angular.module('myapp', ['infinite-scroll']);
app.factory('Colony', function($http) {
var Colony = function() {
this.items = [];
this.busy = false;
this.index = 2;
this.stopscript = false;
};
var userId = 14;
Colony.prototype.nextPage = function() {
if (this.busy) {
return;
} else {
this.busy = true;
var url = '/get_colony_articles?after=' + this.index + '&userId=' + userId + '';
$http.post(url).success(function(data) {
if(data.length>0){
var bookmark_arr=[];
var obj=[];
for (var i = 0; i < data[0].category_name.length; i++) {
for (var j = 0; j < data[0].bookmarks.length; j++) {
if (data[0].category_name[i] == data[0].bookmarks[j].category_name) {
if (data && data.error === 'no more Categories!') {
this.stopscript = true;
} else {
bookmark_arr.push(data[0].bookmarks[j]);
}
}
}
obj={category_name:data[0].category_name[i],bookmarks:bookmark_arr};
bookmark_arr=[];
this.items.push(this.items,obj);
}
this.index = this.index + 2;
this.busy = false;
}
}.bind(this));
}
};
return Colony;
});
And here is my HTML Code
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script src="js/angular/lib/angular.min.js"></script>
<script src="js/angular/lib/ng-infinite-scroll.min.js"></script>
<script src="js/angular/customjs/dashboard.js"></script>
<link rel="stylesheet" type="text/css" href="css/dashboard.css">
</head>
<body ng-app="myapp">
<!-- <div><img src="images/loadingimage.gif" class="loadImg"></div> -->
<div class="recent" ng-controller='recentCtrl'>
<div class="recentname"><h2>Recent Articles</h2></div>
<div ng-repeat='items in data.bookmarks'>
<div class="root">
<div class='title'>{{items.bookmark_title}}</div>
<div class='image'><img ng-src="https://s3.amazonaws.com/biblio-hive/BookmarkPreviewImages/{{items.bookmark_preview_image}}"></div>
</div>
</div>
<button type="submit" ng-click="loadMore(8)"> Load More</button>
</div>
<div ng-controller='colonyCtrl'>
<div id="scroll" infinite-scroll='scroller.nextPage();'
infinite-scroll-container="'scroll'"
infinite-scroll-disabled='scroller.stopscript'
infinite-scroll-distance='2'>
<div ng-repeat='item in scroller.items track by $index' class="test">
<div class="catname"><h2>{{item.category_name}}</h2></div>
<div ng-repeat='item in scroller.items[$index].bookmarks' class="test">
<div class="root">
<div class='title'>{{item.bookmark_title}}</div>
<div class='image'><img ng-src="https://s3.amazonaws.com/biblio-hive/BookmarkPreviewImages/{{item.bookmark_preview_image}}"></div>
</div>
</div>
</div>
</div>
</div>
Sorry I don't have public URL to give example on JsFiddle or Plunker.
You can override it like this:
myapp.value('THROTTLE_MILLISECONDS', 1000);
Place this in your app.js file. It will change
THROTTLE_MILLISECONDS
's default value to1000
i.e 1 second. This way your function will be called after 1 second instead of instantly.