0

I have a table view that displays custom cells, the cells contain an image which I am loading from the documents folder. I notice that when I scroll the table, there is some lag, which I am assuming is coming from loading the image from the disk. However, the image is already loaded at the point so i'm a little confused.

Suggestions on optimizing this code, would be appreciated. I have read about lazy loading, but i'm not sure if this applies to me or not.

I did check to make sure the table was reusing the cells.

Edit:

- (void)configureCell:(BeerCell *)cell 
          atIndexPath:(NSIndexPath *)indexPath 
{
    Beer *beer = (Beer *) [self.fetchedResultsController objectAtIndexPath:indexPath];
    cell.displayBeerName.text = beer.name;

    // check to see if there is a cached image already.  Use a dictionary.
    // make sure this is one of your ivars
    __block UIImage *theImage = [self.imagesCache objectForKey: beer.imagePath];

    // If the image is not in your cache, you need to retrieve it.
    if (!theImage){
        // The image doesn't exist, we need to load it from disk, web or render it

        // First put a placeholder image in place.  Shouldn't be any penalties after the 
        // first load because it is cached.
        cell.beerImage.image = [UIImage imageNamed:@"beer-pic.png"];

        // check to see if your image cache dictionary has been created, if not do so now
        if (_imagesCache == nil) {
            _imagesCache= [[NSMutableDictionary alloc] initWithCapacity:1];
        }

        // get a weak reference to UITableViewController subclass for use in the block
        // we do this to avoid retain cycles
        __weak BeerListViewController *weakSelf = self;

        // do the heavy lifting on a background queue so the UI looks fast
        dispatch_queue_t queue = dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_HIGH, 0);
        dispatch_async(queue, ^ {

            theImage = [UIImage imageWithContentsOfFile:beer.imagePath];

            // I added this in because I create the new core data object in this class, and pass
            // it to the class where I fill out the information about the beer
            if (theImage) {

                // Add the image to the cache
                [weakSelf.imagesCache setObject:theImage forKey:beer.imagePath];
                //[weakSelf.imagesCache addObject:theImage forKey:beer.imagePath];

                // Check to see if the cell for the specified index path is still being used
                BeerCell *theCell = (BeerCell *)[weakSelf.tableView cellForRowAtIndexPath:indexPath];
                // Per the docs. An object representing a cell of the table
                //  or nil if the cell is not visible or indexPath is out of range.
                if (theCell){
                    // dispatch onto the main queue because we are doing work on the UI
                    dispatch_async(dispatch_get_main_queue(), ^ {
                        theCell.beerImage.image = theImage;
                        [theCell setNeedsLayout];
                    });
                }
            }
        });
    }        
    else
    {
        // Image already exists, use it.
        cell.beerImage.image = theImage;
    }
}

3 Answers 3

1

Whenever you load from disk, server, or render images for a tableview you will want to put it on a background queue. It is trivial to do so and will get great performance even on a 3GS.

I use a similar approach for generating thumbnails for tableviews and scroll views from very large images and the performance is very good.

Try this:

- (void)configureCell:(CustomCell *)cell 
          atIndexPath:(NSIndexPath *)indexPath 
{
    CoreDateObject *object = (CoreDateObject *)[self.fetchedResultsController objectAtIndexPath:indexPath];
    cell.displayName.text = object.name;

    // check to see if there is a cached image already.  Use a dictionary.
    // make sure this is one of your ivars
    UIImage *theImage=[self.imagesCache objectForKey: object.imagePath];

    // If the image is not in your cache, you need to retrieve it.
    if (!theImage){
       // The image doesn't exist, we need to load it from disk, web or render it

       // First put a placeholder image in place.  Shouldn't be any penalties after the 
       // first load because it is cached.
       cell.selectedImage.image=[UIImage imageNamed:@"yourPlaceHolderImage"];

       // check to see if your image cache dictionary has been created, if not do so now
       if (_imagesCache==nil){
          _imagesCache=[NSMutableDictionary alloc] initWithCapacity:1];
       }

       // get a weak reference to UITableViewController subclass for use in the block
       // we do this to avoid retain cycles
       __weak YourTableViewControllerSubclass *weakSelf=self;

      // do the heavy lifting on a background queue so the UI looks fast
      dispatch_queue_t queue = dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_HIGH, 0);
      dispatch_async(queue, ^{

              theImage=[UIImage imageWithContentOfFile:object.imagePath];

              // Add the image to the cache
              [weakSelf.imagesCache addObject:theImage forKey:object.imagePath];

              // Check to see if the cell for the specified index path is still being used
              CustomCell *theCell=(CustomCell *)[weakSelf.tableView cellForRowAtIndexPath:indexPath];
              // Per the docs. An object representing a cell of the table
              //  or nil if the cell is not visible or indexPath is out of range.
              if (theCell){
                 // dispatch onto the main queue because we are doing work on the UI
                 dispatch_async(dispatch_get_main_queue(), ^{
                     theCell.selectedImage.image=theImage
                     [theCell setNeedsLayout];
                 });
              }

    }else{
          // Image already exists, use it.
          cell.selectedImage.image=theImage;
    }

    cell.rating.rate = object.rating.doubleValue;
}
4
  • I like this solution, but I am having one problem. When I first load the table when the app launches, all I get is a placeholder image, until I scroll the table, then the correct image appears, any ideas or suggestions. I edited my answer with the code I used.
    – Vikings
    Jul 14, 2012 at 1:40
  • If you found a tutorial that helped with your solution, a link would be greatly appreciated
    – Vikings
    Jul 14, 2012 at 1:41
  • If you are getting a place holder when the app loads and the table cell only updates when u scroll then you are doing something wrong or you didn't adapt the code to fit your specific situation. So far as tutorial, checkout apple's wwdc 2011 videos on using gcd. Jul 14, 2012 at 6:48
  • thank you! This was right, I was having issues resizes the images, my coded wasn't working resulting in loading the full images. That was the cause of the poor performance.
    – Vikings
    Jul 16, 2012 at 15:28
0

one of these two links will better explain how this is done properly..

https://developer.apple.com/library/ios/#samplecode/LazyTableImages/Introduction/Intro.html (official apple)

https://github.com/rs/SDWebImage (nice library to use)..

2
  • I looked at lazy loading, but i'm not getting the images from the web, just reading from the disk
    – Vikings
    Jul 5, 2012 at 15:42
  • 1
    which is how is originally why it was designed this was.. but what it does is place the image loading process on a different thread. This will speed up the loading and make the scrolling more fluid.
    – DJPlayer
    Jul 5, 2012 at 15:56
0

cellForRowAtIndexPath: is called each time when you scroll the table view ... So it can be hang your scrolling if you write large processing code in this method. So for this make an array of your images if possible then use thumbnail images.... then add those images to cell from array. I'm sure your scrolling will be smooth.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.