Caching images in a tableViewCell - rubymotion

Question

wish someone can help me with this:
I have an app displaying remote data. The data consists of a json response containing a list of artitsts performing at some event.
Each artist has a picture I want to display in a tableView.
I'm looking for a optimized way to do this caching the images and creating the cells asynchronously
Here is what I have done so far:
My tableView
class LineupTableViewController < UITableViewController
attr_accessor :artists
#attr_accessor :table
def init
super
self.title = 'Line-up'
self.initWithNibName(nil, bundle:nil)
self.view.styleId = 'lineUpView'
self.tabBarItem = UITabBarItem.alloc.initWithTitle("LineUp", image: UIImage.imageNamed("112-group.png"), tag:2)
self
end
def viewWillAppear(animated)
view.dataSource = view.delegate = self
#artists = []
App::Persistence['event']['artists'].each do |artist|
#artists.push(Artist.new(artist)) unless artist["dj"]
end
end
def viewDidLoad
super
view.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight
end
def tableView(tableView, cellForRowAtIndexPath: indexPath)
artist = #artists[indexPath.row]
ArtistCell.cellForArtist(artist, indexPath:indexPath, inTableView:tableView)
end
def tableView(tableView, numberOfRowsInSection: section)
#artists.length
end
def tableView(tableView, didSelectRowAtIndexPath:indexPath)
detailViewController = ArtistsdetailViewController.alloc.initWithArtist(#artists[indexPath.row])
self.navigationController.pushViewController(detailViewController, animated:true)
end
def tableView(tableView, heightForRowAtIndexPath:indexPath)
80
end
#def reloadRowForIndexPath(indexPath)
# puts "indexPath.section #{indexPath.section}"
# self.view.reloadRowsAtIndexPaths([NSIndexPath.indexPathForRow(indexPath.row, inSection:indexPath.section)], withRowAnimation:false)
#end
end
My custom cell
class ArtistCell < UITableViewCell
attr_accessor :index_path
CellId = "ArtistCellIdentifier"
def setSelected(selected, animated:animated)
super
# Configure the view for the selected state
end
def self.cellForArtist(artist, indexPath:indexPath, inTableView:tableView)
cell = tableView.dequeueReusableCellWithIdentifier(ArtistCell::CellId) || ArtistCell.alloc.initWithStyle(UITableViewCellStyleSubtitle, reuseIdentifier:CellId)
#puts "indexPath #{}"
cell.index_path = indexPath
cell.fillArtist(artist, inTableView:tableView)
cell
end
def fillArtist(artist, inTableView:tableView)
#Dispatch::Queue.concurrent.async do
# Dispatch::Queue.main.sync do
self.textLabel.text = artist.name
self.detailTextLabel.text = artist.country
JMImageCache.sharedCache.imageForURL(NSURL.URLWithString(artist.picture), completionBlock:proc {
|downloaded_image|
self.imageView.image = downloaded_image
})
# end
#end
end
end
What I get now is:
there is no image in displayed cells unless I tap them
when I scroll down the view, the hidden cells' images are displayed, so when I scroll back to the top, all the images are displayed.
Any help solving this would be much appreciated
FF

Answer 1

Try this:
def fillArtist(artist, inTableView:tableView)
self.textLabel.text = artist.name
self.detailTextLabel.text = artist.country
self.imageView.setImage(nil)
JMImageCache.sharedCache.imageForURL(NSURL.URLWithString(artist.picture), completionBlock:proc { |downloaded_image|
self.imageView.image = downloaded_image
self.setNeedsLayout
})
end
end
Explanation: setting NIL in the cell makes sure the new image is loaded. setNeedsLayout forces relayout thus displaying the image without the need to tap.