Image loading is very slow when new items are adding dynamically in a list view

Hi I am making a news website app. I am fetching 30 news for every news category when the app loads. When a user scroll through the list view I am fetching more 30 news using ion infinite scroll from server and adding into the previous json object of the respective news category.

List view thumbnail image is loading properly when app loads but when I scroll through the list view, new fetched list items is loading and showing properly except the thumbnail(News headline is showing but thumnail for the news is not loading moderately). Thumbnail image is loading a long time.

Here is my function for adding new data to the previous object.

// Defining a page number variable for the json link
// from where the news is coming from
pageNumWorldCup = 2;

// Fucntion for load more 30 world cup news
$scope.loadMoreWorldCupNews = function(){
 // fetching the new data
 $http.get('http://latestkhobor.com/?json=get_category_posts&slug=cricket&count=10&status=publish&page='+pageNumWorldCup+'', 
 {cache: true}).success(function(responsedData) {
 $scope.newNews = responsedData.posts;})

// new data is saving in a new variable
var posts = $scope.newNews;

// appending the new data to the previous object
// MY PREVIOUS OBJECT NAME IS worldCupNews
for(var key in posts) {
  if(posts.hasOwnProperty(key)){        
    $scope.worldCupNews.push(posts[key]);        
  }
}
$scope.$broadcast('scroll.infiniteScrollComplete');
pageNumWorldCup += 1;
};

If this is not enough I can set up a pen for see my project. Please somebody help me.

1 Like