Dynamic Loading of Images

Question

I recently ran into a problem with dynamically (lazy) loading images within elements (UIViewController-Subclasses) that are placed within a UIScrollView.

The Situation is as follows:

• a large amount of books with their bookcovers need to be displayed in a horizontally-scrollable scrollview
• due to memory constraints i recycle the book elements; I use a set of 30 book-Instances and re-set their location within the UIScrollView when a didScroll-Delegate methode is being called.
• upon re-seting the frame of the book-element it will also be updated with new content (new book information)
• upon updaten a book-element, the book-cover-image fades out, starts a thread that loads an image from the web and once finished, set's the image into the UIImageViewController's image property.

so far so good, lazy-loading works great, and the re-use of my book-elements works as well...

the problem is that the asynchronously loaded images will only be displayed once the UIScrollview finished its scrolling animation.

I've already tried things like setNeedsDisplay (once the image finisehd loading). But it didn't really help at all...

I hoope you guys have some advice for me....

thanks, sam

Answer 1

Are you using a networking frame work?

If not I would advise using AFNetworking. See following code:

UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0.0f, 0.0f, 100.0f, 100.0f)];
[imageView setImageWithURL:[NSURL URLWithString:@"http://i.imgur.com/r4uwx.jpg"] placeholderImage:[UIImage imageNamed:@"placeholder-avatar"]];

See here:

AFNetworking

Answer 2

You have to set the NSURLConnection to call its delagate on the main run loop so the UI can be updated. Check out the NSURLConnection class reference and search for:

- (void)scheduleInRunLoop:(NSRunLoop *)aRunLoop forMode:(NSString *)mode

Code should look like:

urlConn = [[NSURLConnection alloc] initWithRequest:request delegate:self startImmediately:NO];

[urlConn scheduleInRunLoop:[NSRunLoop currentRunLoop] forMode:NSRunLoopCommonModes];

[urlConn start];

Setting the connection run loop mode to NSRunLoopCommonModes when fetching images gives the delegate the ability to update the UI while the main run loop is in a UI event tracking mode, e.g. when a tableview or scrollview is being scrolled.