UICollectionViewController keeps rearranging itself from asynchronous image load - asynchronous

Question

In my application. I get a bunch of image URLs on the main thread like this:
- (void)viewDidLoad
{
[super viewDidLoad];
[self populateCollection];
}
- (void)populateCollection
{
NSDictionary *json = [NSJSONSerialization JSONObjectWithData:[NSData dataWithContentsOfURL:[MTGJSONBridge JSONURLWithSetCode:#"LEA"]]
options:kNilOptions
error:nil];
NSLog(#"Json: %#", json);
NSArray *cards = json[#"cards"];
_URLs = [NSMutableArray arrayWithCapacity:cards.count];
for (NSDictionary *card in cards)
{
NSURL *imageURL = [MTGJSONBridge URLWithSetCode:#"LEA" cardName:card[#"imageName"]];
if (imageURL)
[_URLs addObject:imageURL];
}
}
This gets me about 300 URLs in 0.2 seconds. Then I try to load the images from each URL asynchronously like this:
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *identifier = #"reuseIdentifier";
MTGCardCollectionCell *cell = (MTGCardCollectionCell *)[collectionView dequeueReusableCellWithReuseIdentifier:identifier forIndexPath:indexPath];
NSURL *url = _URLs[indexPath.row];
dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{
// No explicit autorelease pool needed here.
// The code runs in background, not strangling
// the main run loop.
UIImage *image = [UIImage imageWithData:[NSData dataWithContentsOfURL:url]];
dispatch_sync(dispatch_get_main_queue(), ^{
// This will be called on the main thread, so that
// you can update the UI, for example.
cell.imageView.image = image;
});
});
return cell;
}
I also have this:
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
{
return 1;
}
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
return _URLs.count;
}
The collection loads really quickly, and asynchronously too (I can scroll while things are loading, and I see new images pop up). The problem is that as I scroll up and down, even after all the images have loaded, the thing keeps rearranging itself in a random order: I'll be looking at one cell, and then it'll have its image switched with another for no apparent reason. Why is this happening?

Answer 1

I've discovered a very easy solution:
if (cell.imageView.image == nil)
{
NSURL *url = _URLs[indexPath.row];
dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{
// No explicit autorelease pool needed here.
// The code runs in background, not strangling
// the main run loop.
UIImage *image = [UIImage imageWithData:[NSData dataWithContentsOfURL:url]];
dispatch_sync(dispatch_get_main_queue(), ^{
// This will be called on the main thread, so that
// you can update the UI, for example.
cell.imageView.image = image;
});
});
}
else
{
NSLog(#"Cell image isn't nil");
}
All I have to do is check if the cell isn't already loaded. Turns out the - (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath method is called whenever a cell comes into view. Even if it was just in the view.