Phonegap: loading images is very slow on Android

I am creating an app in android using phonegap and ionic to get images from SD card and display it. So I was able to get all the images, but it takes longer to display these images. Scrolling is also very slow and clicks take a second to do something. I am using collection -repeat to display these images. This is my code:

function onDeviceReady() {
    window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFS, fail);
}

function gotFS(fileSystem) {
    window.fileSystem = fileSystem;
    fileSystem.root.getDirectory("", {
        create: false,
        exclusive: false
    }, getsubdirectry, onError);
}

function getsubdirectry(dirEntry, onComplete) {
    try {
        var directoryReader = dirEntry.createReader();
    } catch (e) {
        alert(e);
    }
    directoryReader.readEntries(function(entries) {
        for (i = 0; i < entries.length; i++) {
            if (entries[i].name.indexOf(".jpg") == -1) {
                if (entries[i].isDirectory) {
                    entries[i].getDirectory("", {
                        create: false,
                        exclusive: false
                    }, getsubdirectry, onError);
                }
            } else {
                imagedetails.push({
                    id: i,
                    url: entries[i].toURI(),
                    tag: ""
                });
            }
        }
        onComplete();
    }, function(error) {
        alert("Error: = " + error.code);
    });
}   

      

        
        
        
      

    

In html

 <a  href="#/tab/photo/{{friend.id}}" class="gallery-item"  collection-repeat="friend in outputphotos | myFilter:text track by $index"  collection-item-width="'33%'"
collection-item-height="'33%'">

  <img ng-src="{{friend.url}}" id="imageviewmainpage">
</a>

      

        
        
        
      

    

So what changes should I add to make the download fast or is there some other way?