Titanium: ListView load remote images - titanium

Question

I've got the below bit of code which pull back a list of the users facebook contacts along with their profile picture, however the images are not loading for each user, it is only showing the images for a few users.
fb.requestWithGraphPath('me/friends', {
fields : 'first_name,last_name,id,installed,picture.width(120).height(120),gender'
}, 'GET', function(e) {
if (e.success) {
var d = JSON.parse(e.result);
var pData = [];
var iData = [];
var row = d.data;
row = row.sort(sortByName)
for (var i = 0; i < d.data.length; i++) {
var img = row[i].picture.data.url
if (row[i].installed) {
pData.push({
properties : {
title : row[i].first_name + " " + row[i].last_name,
id : row[i].id,
image : img,
gender : row[i].gender,
accessoryType : Ti.UI.LIST_ACCESSORY_TYPE_DISCLOSURE
},
template : Ti.UI.LIST_ITEM_TEMPLATE_DEFAULT
});
} else {
iData.push({
properties : {
title : row[i].first_name + " " + row[i].last_name,
id : row[i].id,
image : img,
accessoryType : Ti.UI.LIST_ACCESSORY_TYPE_DISCLOSURE
},
template : Ti.UI.LIST_ITEM_TEMPLATE_DEFAULT
});
}
}
var play = Ti.UI.createListSection({
headerTitle : 'Play with Facebook Friends',
items : pData
});
var invite = Ti.UI.createListSection({
headerTitle : 'Invite Facebook Friends',
items : iData
});
var listView = Ti.UI.createListView({
sections : [play, invite],
});
self.add(listView)
} else {
alert("Facebook Error");
}
})
The images are stored in var img = row[i].picture.data.url and pushed into the data array as part of image : img but not all images are loading.
Is there a way to force the images to load? and show a default image whilst they are loading?

Answer 1

Here is a link to complete example to do exactly what you are trying to accomplish abaove
http://www.clearlyinnovative.com/blog/post/34758524584/alloy-listview-facebook-friends#.UgexZGRATrg