Using a placeholder image before loading the full image

Question

What is the correct way to use a placeholder image?

I want to fill a UIScrollView with images as subviews, but it has been to heavy on the older devices to load in all the full images before showing the scrollview.

How can a placeholder image be used so that I can load in the full image when the user scrolls to that contentOffset?

I tried using the thumbnail of the ALAsset, but the scaling looks horrible.

Answer 1

Suppose you're using UIImageView subviews for your image tiles. At the beginning, you can populate your UIImageView subviews like so:

 for each tile location in myScrollView area:
    [myScrollView addSubview:[UIImageView 
       initWithImage:[UIImage imageNamed:@"placeholder.png"]]];

The key here is that imageNamed does caching behind the scenes (see the SDK docs), and only one actual placeholder.png image will exist in memory.

In your delegate to UIScrollView events, when user has scrolled and settled on a new tile that doesn't have its content loaded, set off the loading process and replace the UIImageView at that location (remove the placeholder, add the proper one).

Obviously, you might want to unload old image tiles too at some point to save memory.