Buggy and Slow scrolling when loading TableView images from CoreData - core-data

Question

Problem :
The process of loading images to Table View using their Paths that who stored in Core Data DB works fine , but the user experience not going well. The scroll is slow and buggy.
Importants Notes :
For my local DB i use Core Data
Im not saving the image it self in the Core Data , only their path(the image name)
As for the table view DataSource , i use an array of type Person that contains an ID and Img name(TableView rows equal array.Count).
-This is the url im getting my Json from (Check it out) - Json Link
All the object inside the Core Data DB
As far as i know , i did all the UI Updates in the Main theard
After each check im reloading the tableview.
This are the steps that being taking in a right sequence :
Get the data using NSURLSession - DataTask. After that "parsing" it and check if each object(In a for loop) exists in the Core Data DB,and than appending his variables to the TableView datasource array , and reloading the data
1)
let request = NSMutableURLRequest(URL: dataSourceURL!)
let task = NSURLSession.sharedSession().dataTaskWithRequest(request) {
data, response, error in
if error != nil {
println("error=\(error)")
return
}
if data != nil {
let datasourceDictionary = NSJSONSerialization.JSONObjectWithData(data, options: nil, error: nil) as NSDictionary
var DataArray = datasourceDictionary["descisions"] as NSArray
//Convert it to useable array
for var i = 0 ; i < DataArray.count ; i++ {
let ID_s = DataArray[i]["ID"]! as Int
//For each Object from the Json array i'm check if he is exisitng in the local DB
var ConvertetdID = Int32(ID_s)
let object : Lockdown? = self.CheckIfObjectExistInDBbyID(ConvertetdID)
//CheckIfExists - if it does , it return an object with the correct values
if object != nil {
//exists - load file from Core Data
let imgname = object!.imgPath
let photoRecord = PhotoRecord(name:"\(ConvertetdID)", url:imgname)
self.photos.append(photoRecord)
//TableView object array (photos)
dispatch_async(dispatch_get_main_queue()) {
self.tableView.reloadData()
//After each check reload the tableView
}
}
}
}
task.resume()
Method that checks if he is exists or not in Core Data DB(the method receive the ID and returns object if exists and nil if not :
func CheckIfObjectExistInDBbyID(id : Int32) -> Lockdown? {
let appDelegate =
UIApplication.sharedApplication().delegate as AppDelegate
let managedContext = appDelegate.managedObjectContext!
var request : NSFetchRequest = NSFetchRequest(entityName: "Lockdown")
request.predicate = NSPredicate(format: "id = %d", id)
var error : NSError?
request.fetchLimit = 1
var count : Int = managedContext.countForFetchRequest(request,error: &error)
if count == 0 {
// println("Error : \(error?.localizedDescription)")
println("Object \(id) Dosent exist in CoreData")
return nil
}
println("Object \(id) exist in CoreData")
let result = managedContext.executeFetchRequest(request, error: &error) as NSArray!
let lockdown = result.objectAtIndex(0) as Lockdown
println(lockdown.id)
return lockdown
}
cellForRowAtIndexPath method
let cell = tableView.dequeueReusableCellWithIdentifier("CellIdentifier", forIndexPath: indexPath) as UITableViewCelllet photoDetails = photos[indexPath.row]
cell.textLabel.text = photoDetails.name as String
dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_BACKGROUND, 0)) {
var myPathList : NSArray = NSSearchPathForDirectoriesInDomains(NSSearchPathDirectory.CachesDirectory, NSSearchPathDomainMask.UserDomainMask, true)
var myPath = myPathList[0] as String
myPath = myPath.stringByAppendingPathComponent("\(photoDetails.name).png")
var image : UIImage = UIImage(contentsOfFile: myPath)!
dispatch_async(dispatch_get_main_queue()) {
cell.imageView.image = image
}
}
return cell
Any suggestions what is the cause of the problem?

Answer 1

You shouldn't always load the image from disk, it's slow. Instead, load the image from disk the first time and then store it in a cache (in memory). Check if the image is cached before loading it from disk.
You need to empty the cache if it gets too big or you get a memory warning.
Advanced versions can pre-cache some images for the cells that are just below the current scroll position.
You may be able to use a library for this, perhaps SDWebImage with file URLs (I haven't tried this).
The buggy part is because your async block doesn't check that the cell hasn't been reused before the image is loaded. If it has then the wrong image will appear on the reused cell (until it's replaced by another image). To fix, capture the indexPath in the block and get the cell for that indexPath once the image is loaded - if the table view returns nil then the cell is no longer visible and you don't need to do anything other than cache the image for future use.