How to load image asynchronously from server in titanium ?

Question

How to load image asynchronously from server in titanium ?

You must Login before you can answer or comment on any questions.

I have a web service, which returns continuously a bunch of data from service. Each data contains a image url. Now I want to generate table using data but image will be loaded one by one after generating table. Any idea or source code help needed.

Thanks in advance :)

2 Answers

Your Answer

Think you can help? Login to answer this question!

Accepted Answer

Accepted Answer

Try using this code

var my_image = new_cached_image('images/biguserimage.png', modified_url);
 
 
function new_cached_image( default_image, modified_url) {
    Ti.include('common/cachedImageView.js');
    var cached_image = Ti.UI.createImageView({
        image : default_image,
    });
    cachedImageView('cached_images', modified_url, cached_image);
    return cached_image;
};

and cachedImageView.js

/*
 Developed by Kevin L. Hopkins (http://kevin.h-pk-ns.com)
 
 
 Expects parameters of the directory name you wish to save it under, the url of the remote image,
 and the Image View Object its being assigned to. */
 
cachedImageView = function(imageDirectoryName, url, imageViewObject) {
    // Grab the filename
    var filename = url.split('/');
    filename = filename[filename.length - 1];
    // Try and get the file that has been previously cached
    var file = Ti.Filesystem.getFile(Ti.Filesystem.applicationDataDirectory, imageDirectoryName, filename);
 
    if (file.exists()) {
        // If it has been cached, assign the local asset path to the image view object.
        imageViewObject.image = file.nativePath;
    } else {
        // If it hasn't been cached, grab the directory it will be stored in.
        var g = Ti.Filesystem.getFile(Ti.Filesystem.applicationDataDirectory, imageDirectoryName);
        if (!g.exists()) {
            // If the directory doesn't exist, make it
            g.createDirectory();
        };
 
        // Create the HTTP client to download the asset.
        var xhr = Ti.Network.createHTTPClient();
 
        xhr.onload = function() {
            if (xhr.status == 200) {
                // On successful load, take that image file we tried to grab before and
                // save the remote image data to it.
                file.write(xhr.responseData);
                // Assign the local asset path to the image view object.
                imageViewObject.image = file.nativePath;
            };
        };
 
        // Issuing a GET request to the remote URL
        xhr.open('GET', url);
        // Finally, sending the request out.
        xhr.send();
    };
};

Hope this helps. Working absolutely fine for me.

Answer 2

Hi

Firstly the answer provided by Sahil is excellent, but in case you are not looking to cache the images locally I thought I would add my thoughts.

IF all you are after is to have images appear from a remote url, then simply reference that url in an imageview, the oading of images is automatic and will only occur when they come into view - so you do not need to handle their download manually.

var image = Ti.UI.createImageView({
    image:'http://example.com//images/myimage.png'
});

You can of course add these to tableviewrows as a leftImage, rightImage or a view added with a view (as above).

var row = Ti.UI.createTableViewRow({
  title: 'Title 1',
  leftImage: 'http://example.com//images/myimage1.png',
  rightImage: 'http://example.com//images/myimage2.png'
});

If you add 200 hundred images but only 10 are visible then only 10 will be loaded, when other images come into the visual space then those are also loaded.