Caching image in phonegap application

Posted By : Avilash Choudhary | 08-Dec-2014

Caching Image in Phonegap

Caching image in phonegap application, instead of reloading image multiple times, the best way is to cache image on local by downloading it and show the image from local url.

 

If you are building a phone gap application and you are using lots of images in your content then it is must to cache the image in device local storage. show that multiple reload of images no further required. The below code describes how to create directory and download the server images into local and then use those local urls to show the image.

 

The imageCache.getImage function creates a local directory to save the image. we call that function in starting to create local directory. After that we call the imageCache.serverDIR function and pass the image server url as an argument. From the server url this function extract the name of the image and check in the local entries if image name found then it returns the local url of image otherwise it download the image from server. When next time you call this function it returns the local url of image.

imageCache.locDir = null;
imageCache.cacheDir = null;
imageCache.dirReader = null;
imageCache.readDir = null;

imageCache.getImage = function() {
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, imageCache.gotFS, imageCache.failFS);
};

imageCache.gotFS = function(fs) {
fs.root.getDirectory("ImgCache", {
create : true,
exclusive : false
}, imageCache.getDIRS, imageCache.getDIRF);
console.log("Directory Created..");
};

//Local Directory Created
imageCache.getDIRS = function(dir) {
imageCache.readDir = dir;
cacheDir = dir.toURL();
imageCache.locDir = cacheDir;

};

imageCache.getDIRF = function(error) {
console.log("ERROR : " + error.code);
};

checking if image exists in local directory or not. if exists returns the url otherwise download from server.

imageCache.serverDIR = function(sUrl,_callback) {
console.log("Server url : " + sUrl);
serverUrl = encodeURI(sUrl);

if (sUrl) {
fileName = sUrl.substr(sUrl.lastIndexOf("/") + 1);
targetUrl = imageCache.locDir + fileName;
console.log("Target Location : " + targetUrl);
console.log("File Up : " + fileName);
imageCache.read(function(locUrl) {
_callback(locUrl);
});

} else {
_callback();
}

};

imageCache.read = function(_callback) {
imageCache.dirReader = imageCache.readDir.createReader();
imageCache.dirReader.readEntries(function(entries){
var flag = false;
if (entries.length > 0) {
for (var i = 0; i < entries.length; i++) {
console.log("Entry " + i + " : " + entries[i].name);

if (entries[i].name == fileName) {
flag = true;
}
}
if (!flag) {
imageCache.transferFile(serverUrl, targetUrl);
_callback();
} else {
console.log("File Already Exists.");
console.log("File : " + fileName);
if(imageCache.locDir){
_callback(imageCache.locDir+fileName);
}else{
_callback();
}

}
} else {
imageCache.transferFile(serverUrl, targetUrl);
_callback();
}

}, function(e){
console.log("Error Reading Directory : " + e.code);
_callback();
});
};
 

This function download the image from server to local directory.

 
imageCache.transferFile = function(srcUrl, trgtUrl) {
fileTransfer = new FileTransfer();
fileTransfer.download(srcUrl, trgtUrl, function(entry) {
console.log("download complete: " + entry.toURL());
}, function(error) {
console.log("download error source " + error.source);
console.log("download error target " + error.target);
console.log("upload error code" + error.code);
});
};

About Author

Author Image
Avilash Choudhary

Avilash has excellent experience in developing mobile and web applications using jQuery , Javascript and PhoneGap. His hobbies are watching and playing cricket.

Request for Proposal

Name is required

Comment is required

Sending message..