UICollectionView image display optimization

Grid-based-Photo-App

There are already a lot of posts and blogs which talk about image showing optimization in UICollectionView, but most of them are paging disabled and the most common way is to cancel requesting images in the middle part while scrolling fast, and load visible cells when stop scrolling.

In this post, I will discuss about how to make image display smoothly while enable UICollectionView paging.

Version 0: basic native method

[cell.imageView setImage: [UIImage imageWithData:[NSData dataWithContentsOfURL:[NSURL URLWithString:imageURL]]]];

Version 1: AFNetworking 2.0 (import “UIImageView+AFNetworking.h”)

[cell.imageView setImageWithURL:[NSURL URLWithString:postCoverURL]];

Version 2: preload image in an extra UIImageView array (imageViews) as cache for next cell + method in Version 1

[self loadImageView:(unsigned int) (indexPath.row + 1)];
- (void)loadImageView:(unsigned)page {
    if (!self.imageViews) {
        self.imageViews = [[NSMutableArray alloc] initWithCapacity:[self.imgURLs count]];
    }

    if (page >= [self.imgURLs count]) {
        return;
    }

    NSURL *url = self.imgURLs[page];
    if ([self.imageViews count] > page) {
        UIImageView *imageView = ((UIImageView *) self.imageViews[page]);
        [imageView setImageWithURL:url];
    } else {
        UIImageView *imageView = [[UIImageView alloc] init];
        [imageView setImageWithURL:url];
        [self.imageViews addObject:imageView];
    }
}

Version 3: cancel loading images skipped while scrolling fast

Version 4: fetch small group of cell content (images, posts) each batch and load next batch when touch the end, like Houzz iOS app does.

Version 5: download other cell related information (thumbnail, text, etc.) initially rather than load with primary content

Version 6: fetch the appropriate size image to display on screen, do not download large one and resize

Version 7: use low level 3rd part library if use AFNetworking or other network request library

Version 8: use appropriate placeholder image in transition

Version 9: compress images used in UICollectionViewCell when upload if its size is over threshold, balance between quality and loading speed, compress as much as possible since the image size is the network request source.

Version 10: compress images based on their density (byte/pixel), which will control image quality in more details

Donate $5 to me for a coffee with PayPal and read more professional and interesting technical blog articles. Feel free to visit my web app, WhizWallet, to apply for credit, store or gift cards, DealsPlus to browse daily deals and store coupons to save money.
Follow me @Yaoli0615 at Twitter to get latest tech updates.

 

Resource:

Professional iOS Programming

Advanced Swift: Updated for Swift 3

iOS Apps for Masterminds, 2nd Edition: How to take advantage of Swift 3 to create insanely great apps for iPhones and iPads

iOS Components and Frameworks: Understanding the Advanced Features of the iOS SDK (Developer’s Library)

iPhone Advanced Projects (Books for Professionals by Professionals)

iOS Core Animation: Advanced Techniques

Swift Cookbook – 50 Recipes to Help You Harness Swift

development of advanced and practical iOS 6(Chinese Edition)

Reference:

Image caching with AFNetworking

How Does Caching Work in AFNetworking? AFImageCache & NSURLCache Explained

Advanced imaging on iOS

iOS-image-caching-sdwebimage-vs-fastimage

Disk caching with AFNetworking

Image caching benchmark

Avoiding-image-decompression-sickness

How is SDWebImage better than X

NSURLCache

AFNetworking cache

How to cache server response in iOS app

iOS图片加载速度极限优化—FastImageCache解析

Advertisements

About liyao13

Yao Li is a web and iOS developer, blogger and he has a passion for technology and business. In his blogs, he shares code snippets, tutorials, resources and notes to help people develop their skills. Donate $5 to him for a coffee with PayPal at About Me page and read more professional and interesting technical blog articles. Follow him @Yaoli0615 at Twitter to get latest tech updates.
This entry was posted in iOS and tagged , , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s