将图像从素材资源库加载到UICollectionView

Question

I'm using ELCImagePicker https://github.com/B-Sides/ELCImagePickerController in order to pick my images from the phone's library. ELC has two options to return, the first is the UIImage itself (which I don't want as it crashes due to memory when picking more than 5 images). The second is the asset location of the image, this is good for the memory, although my problem is while showing the images on the collection view.

So I have this piece of code that works fine and shows the images, but when I scroll up and down through the collection view, it lags a bit. I assume it's because every time it wants to load a cell it has to go through a block and its asynchronous. I'm trying to find a way to remove the lag and make it scroll smoothly.

Any help would be much appreciated. :)

 ALAssetsLibrary *library = [[ALAssetsLibrary alloc] init];

 [library assetForURL:_chosenImages[indexPath.row] resultBlock:^(ALAsset *asset) {

    UIImage *image = [UIImage imageWithCGImage:asset.thumbnail];
  // I believe the problem is here..
    [myCell.imageView setImage:image];
} failureBlock:^(NSError *error) {
    NSLog(@"An error occurred while loading image: %@", error.description);
}];

Answer 1

In the - (void)selectedAssets:(NSArray *)assets method in ELCImagePickerController.m you will be able to see this line

ALAsset *asset = elcasset.asset;

after this line, there is a dictionary created which then addd to returnArray . Skip this dictionary creation part. Add the asset to the returnArray directly. change the for method to look like this:

for(ELCAsset *elcasset in assets) {
    ALAsset *asset = elcasset.asset;
    [returnArray addObject:asset];  
}

Have fun.

***EDIT*** Also please create a singleton to maintain the life of the AssetLibrary in ELCAlbumPickerController .

Answer 2

First of all, ALAssetsLibrary doesn't guarantee that the result block is called on the main thread. You should do the expensive stuff (generating the UIImage ) on a background thread, and any UI work should be done on the main thread. So you need to fix that first:

dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_HIGH, 0), ^{
    UIImage *image = [UIImage imageWithCGImage:asset.thumbnail];

    dispatch_async(dispatch_get_main_queue(), ^{
        [myCell.imageView setImage:image];
    });
});

Second of all, when you finally get to myCell , this cell is no longer guaranteed to have the same content. This is because cells are reused during scrolling. So you need to get the correct cell.

One common approach is to use the indexPath :

dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_HIGH, 0), ^{
    UIImage *image = [UIImage imageWithCGImage:asset.thumbnail];

    dispatch_async(dispatch_get_main_queue(), ^{
        MyUICollectionViewCellSubclass *correctCell = (MyUICollectionViewCellSubclass *)[self.collectionView cellForItemAtIndexPath:indexPath];
        [correctCell.imageView setImage:image];
    });
});

However, this will only work if the index paths are guaranteed not to change which may or may not be the case depending on your use case. For example, if the user can insert or delete items, you'll need to take a different (but similar) approach.

Finally, make sure to nil out imageView 's image when reusing a cell (so you don't show old images as the cells scroll in.)

---

Also, it's been a while since I used the assets library, but I think you shouldn't use imageWithCGImage: but rather imageWithCGImage:scale:orientation: . I believe the method you're currently using will look blurry on Retina devices, and might get the orientation wrong.