Example in listview loop

[nuno]

Hey @Topener I know we talk about this before, but will be great if you could add an example of how implement image caching in a listview / array / loop etc. :)

In a README file example will be fine.

[kerberosargos]

Hi @nuno could you find a way for ListView implementation? I am using cache method but image is not shown on ListView. remoteImage method is freezing UI.

[Topener]

I've personally worked my way around ListView implementation by using either a TableView or running a loop and one-by-one replace templates, not all at one.

[kerberosargos]

I did not understand how to use this module. I have Listview I am filling data with remote Json. ListView data loops every 1 minute. I would like to check if remote image in cache folder loading it from cache if not I would like to showing fake image at first loop. But I would like to download it with using in background in first loop same time.

Then I would like to show real remote image from cache folder at second loop.

My controller codes as below;

_.each($JsonItemsSorted, function($Json, $Index) {
	$ListItems.push({
					template : "_TemplateCountries",
					
					//> this is Label
					_CountryName : {
						text : $Json.CountryName
					},
					
					//> this is ImageView
					_CountryFlag : {
						image : require('To.ImageCache').cache($Json.FlagUrl),
					},

});

When I using below code remote image seems but app UI blocking in every loop when loading images

_CountryFlag : {
						image : require('To.ImageCache').remoteImage($Json.FlagUrl),
					},

[Topener]

the remoteImage property is not async... recommended way is to use the cache method with callback, then when callback hits, update the row!

[kerberosargos]

I think that is not possible for ListView template, am I wrong? I have found a solution to add new function and modified some things from To.ImageCache.js file as below;

new function

var kerberosImageCache = function(_QsUrl) {
	var _GetCacheFile = getBlob(_QsUrl);

	if (!_GetCacheFile) {

		cache(_QsUrl, 3000, function(blob) {
			storeBlob(blob);
		});

		_GetCacheFile = 'images/blank-image.png';
		if (c.debug) {
			Ti.API.warn("kerberosImageCache: false");
		}
	} else {
		if (c.debug) {
			Ti.API.warn("kerberosImageCache: true");
		}
	}
	
	return _GetCacheFile;

};

modified export settings

module.exports = {
	config : config,
	cacheSize : cacheSize,
	flushExpired : flushExpired,
	clearCache : clearCache,
	removeFile : removeFile,
	removeRemote : removeRemote,
	remoteImage : remoteImage,
	cache : cache,
	storeBlob : storeBlob,
	getBlob : getBlob,
	kerberosImageCache: kerberosImageCache
};

remove "blob-" string from "storeBlob" and "getBlob " functions

var storeBlob = function(name, blob, cb) {
	var filename = md5FileName(name);
	var nPath = storeFile(filename, blob, true);
	cb && cb(nPath);
	blob = null;
	return readFile(filename);
};

var getBlob = function(name) {
	var filename = md5FileName(name);

	return readFile(filename);
};

using from controller js (ListView Template)

_CountryFlag : {
	image : require('To.ImageCache').kerberosImageCache(($VarsGlobal.RemoteHost + "/images/flags/" + $Country + ".png").replace(/ /ig, '-'))
	},

[Topener]

not possible in template, but you can use https://docs.appcelerator.com/platform/latest/#!/api/Titanium.UI.ListSection-method-updateItemAt to update with url once downloaded

So basically re-render the row once downloaded. This is a lazy-loading flow that works really well and doesn't block UI. If you use models/collection you just have to update the image property in your model to reflect a url and it'll work out of the box