Ionic scroll is lagggy with white overlay

Question

Issue which I have is when I scroll page loads square by square like this https://i.sstatic.net/yHNLx.jpg

here is my code

categoryList.html

<ion-header-bar align-title="center" class="bar-stable">
    <h1 class="title">Best Wishes App</h1>
</ion-header-bar>
<ion-content class="padding" overflow-scroll="true">
    <div class="list">
        <div class="card responsive-card" ng-repeat="item in data">
            <a href="#/sublist/{{item.id}}">
                <div class="item item-image">
                    <img ng-src="{{item.image}}" alt="item image">
                </div>
                <div class="item item-divider">
                    {{item.categoryTitle}}
                </div>
            </a>
        </div>
    </div>
</ion-content>

app.js

angular.module('starter', ['ionic'])            
        .config(function ($stateProvider, $urlRouterProvider) {
            $stateProvider
                .state('list', {
                    url: '/',
                    templateUrl: 'template/categoryList.html',
                    controller: 'ListController'
                })                    
            $urlRouterProvider.otherwise("/");
        })
        .controller('ListController', ['$scope', '$http', '$state', '$ionicHistory', '$rootScope', function ($scope, $http, $state, $ionicHistory, $rootScope) {                
            console.log($rootScope.data);
            $rootScope.$watch('data',function(){
                $scope.data = $rootScope.data;
            })
        }])

As I am new to Angular you might need to elaborate your answer in detail. :/

I am using ionic-framework version 1.7

as IDE I use visual studio which uses cordova CLI in background to package and run the app.

Answer 1

You should consider using ionics collection-repeat instead of ng-repeat if you know all your elements will be the same height.

See this example: http://codepen.io/ionic/pen/0c2c35a34a8b18ad4d793fef0b081693

You can just set two items next to each other like in your example.

Also you may want to consider disabling the javascript scrolling in ionic if you haven't already done so. The javascript scrolling has been known to be a little buggy. You can do it globally like this in your config:

.config(function($ionicConfigProvider) {
  $ionicConfigProvider.scrolling.jsScrolling(false);
})

Last but not least, if nothing above works you should consider using a lazy loader for the images so you can't see the "lag". I have personally used the ionic-image-lazy-load plugin which can be installed via bower and it has worked great. My images were doing the same flickering thing as yours.

Plugin: https://github.com/paveisistemas/ionic-image-lazy-load

Example: http://codepen.io/mvidailhet/pen/yNOGzY

Hopefully these can be helpful to you!