×

HELLO, MY
NAME IS MARTIN
AND THIS IS
MY BLOG

Titanium module for image caching

Posted on

Update

This post refers to the very first version. You can find the latest one here.

What’s the deal?

The task is simple and the drill is always the same: you load a remote image into a Ti.UI.imageView. It works as expected. But is it really necessary to download the image over and over again? Wouldn’t it make more sense to store the image to the filesystem, and only download it again if it was modified? I mean, especially if we are talking about big, big images?

No, you are absolutely right. That is why I have created a simple commonJS module. As of version 0.1 (right, I just started working on it) it goes like this:

// Require the magic 😉
var imageCaching = require('/lib/mwfire-image-caching');

// Add an imageView to your window
var imageView = Ti.UI.createImageView({
    top: 20,
    width: 200,
    height: 200,
    backgroundColor: '#CCC'
});
win.add(imageView);

// Now load the image you want to add to imageView
imageCaching.loadImage('avatar.png', 'http://www.mwfire.de/test/', function(response) {
    if(response && response.success) {
        imageView.image = response.file;
    } else if(!response.success) {
        alert(response.error);
    }
});

That was easy, wasn’t it? The module only requires a filename, a URL and a function to deal with the response.

Under the hood it creates a folder in your file system to store downloaded images. Then it checks if you already have a file with that name stored on your device. If yes, it checks if there is a newer version of that image available, and either downloads the newer file to display, or simply returns the cached file. Oh, and if you have never downloaded this image before, it is simply downloaded and displayed, but next time, it is loaded from the file system.

But it is still a long and windy road. Things I want to have in the next releases: * Check available space on device before downloading * Check if it is a valid filename * Handle multiple images with the same filename. (That is a tricky one, maybe saving the images to a special path, depending on the URL, might be a solution) * Include an option to not always lookup the remote file and check for changes, but in a defined interval * Maybe wrapping the Ti.UI.imageView itself would be an option, so you don’t need to call the function manually, but simply call extendedImageView with options…

As you can see, there is more to come 😉

Download

You can find this module here (GitHub).