Titanium module for image caching V0.5

Posted on

Hey, it has only been a few days since I have put up the source for the Titanium image caching module on GitHub, but I have made some serious enhancements since then.

What does it do?

The image caching module downloads images from a given url, displays them while storing them in unique folders within a custom `cachedImage` folder in the application data directory. The next time one image these images is requested, it is returned from the storage directly. The module, however, also offers the ability to check if a newer version is available at the server, without downloading the whole image. It sends a simple HEAD request and checks if you have cached the latest file. If not, the latest version is downloaded, cached and displayed. You can also set an interval, which defines when to look for a newer version of your file.

So what’s new?

First of all, you do not have to take care of the image handling manually anymore (though you can if you want to). I have wrapped Titaniums Ti.UI.ImageView and enhanced it with two simple properties: remoteCheck and checkInterval. Check out this example:

// Load the image caching module
var imageCaching = require('/lib/mwfire-image-caching');

var imageView = imageCaching.createImageView({
    width           : 60,
    height          : 60,
    left            : 10,
    backgroundColor : '#CCC',
    image           : images[i],
    remoteCheck     : true,
    checkInterval   : 60 //in minutes

remoteCheck defines if an image should be displayed right from the cache, or if we should check if the original on the server has been modified since the last download. Additionally, you can set an interval (60 minutes in this example). So if your image was downloaded more than 60 minutes ago, we check for a new version, otherwise we return the cache directly. Ah, and you can also utilize the image cache handling manually:

// Set remote check options
var options = { remoteCheck: true, checkInterval: 10 };

// Load our image
imageCaching.loadImage('http://www.yourdomain/yourimage.png', options, function(response) {
    if(response && response.success) {
        imageView.image = response.file;

What else?

I have also introduced two methods for deleting files in the cache:
deleteCachedImage() and deleteCache(). So now you can either delete a single image or the entire cache with one call. Here is an example:

//Delete this image from the cache
//Delete all images from cache

Cool, where do I find it?

You can find this module including documentation on GitHub.

Whoa, it does not work!

If you find any errors or have any ideas, please do not hesitate to let me know! This is a very early version, beta, so to speak, so I would appreciate every feedback!