Uiscrollview lazy loading

Question

I have got all images of iphone using AssetsLibrary.I am passing UIImage object in imageview and display images in scrollview. There are more than 200 images in iphone and i

Answer 1

I've been working on this recently and have checked out loads of example code on the web. None of it really did lazy loading (despite the claim) or had much more complexity (needless bells and whistles) than I was willing to put up with. The Apple WWDC videos for PhotoPicker appear to show lazy loading but seem more focused on tiling of pre-sliced up images, so not much help there.

What I've ended up doing is to load all the aspectThumbnails at once, since they are small and don't take up that much memory and then load the fullScreenImage representation on demand from scrollViewDidEndDeceleratingand reload the aspectThumbnail for the imageView going off-screen. The effect is very fluid and visually, the image comes in a little rough and then quickly (through background loading) is replaced with the higher resolution image.

It can probably use more refinement - perhaps loading full resolution images for the currentPage +1 & -1. I haven't got around to that as yet. Also, I'm not entirely sure if my use of blocks in optimal – but not getting an errors.

I call this from a Segue and set the assetsArray (NSArray of ALAssets) from within the prepareForSegue: method on my root viewController.

//  ScrollViewController.h
#import 
#import 

@interface ScrollViewController : UIViewController 

@property (weak, nonatomic) IBOutlet UIScrollView *scrollView;
@property (strong, atomic) ALAssetsLibrary* assetLibrary;
@property (nonatomic,strong)NSMutableArray* assetsArray;
@end

//ScrollViewController.m

#import "ScrollViewController.h"

@interface ScrollViewController ()

@property (nonatomic,assign) CGSize currentImageSize;
@property (nonatomic, assign)int currentPages;
@property (nonatomic, assign)int currentPageNum;
@property (nonatomic, strong)UIImage* placeHolder;
@end



@implementation ScrollViewController


- (void)viewDidLoad
{
    [super viewDidLoad];

    //self.placeHolder = [UIImage imageNamed:@"loader.jpg"];
    self.scrollView.delegate = self;
}

- (void)viewWillAppear:(BOOL)animated
{
    [super viewWillAppear:animated];

    if (self.assetsArray != nil) {
        self.currentPages = [self.assetsArray count];

        CGSize size = self.scrollView.frame.size;
        int num = self.currentPages;

        self.scrollView.contentSize=CGSizeMake(size.width*num, size.height);

        [self loadThumbnails];

        self.currentPageNum = 0;
        [self loadFullScreenImageByIndex:self.currentPageNum];
    }
}

-(void)loadThumbnails
{
    int pageCount = self.currentPages;
    CGSize size = self.scrollView.frame.size;
    self.scrollView.contentSize=CGSizeMake(size.width*pageCount, size.height);

    for (int i = 0; i < pageCount; i++) {

        ALAsset *asset = [self.assetsArray objectAtIndex:i];//
        CGRect imageViewFrame;

        // x offset is determined by arrayIndex
        imageViewFrame.origin.x = self.scrollView.frame.size.width * i;
        imageViewFrame.origin.y = 0;
        imageViewFrame.size = self.scrollView.frame.size;

        self.currentImageSize = imageViewFrame.size; // THIS IS WRONG

        UIImage *image = [[UIImage alloc] initWithCGImage:asset.aspectRatioThumbnail];
        UIImageView *imageView = [[UIImageView alloc] initWithImage:image];
        imageView.clipsToBounds = YES;
        imageView.contentMode = UIViewContentModeScaleAspectFill;
        imageView.frame = imageViewFrame;
        imageView.tag = i+1;// start tags at 1

        [self.scrollView addSubview:imageView];
    }
}


- (void)viewDidUnload {
    [self setScrollView:nil];
    [super viewDidUnload];
}

- (void)loadFullScreenImageByIndex:(int)index
{
    int arrayIndex = index;
    int tagNumber = index+1;
    ALAsset *asset = [self.assetsArray objectAtIndex:arrayIndex];

    __weak typeof(self) weakSelf = self;

    dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_BACKGROUND, 0), ^{
        UIImage *tmpImage = [[UIImage alloc] initWithCGImage:asset.defaultRepresentation.fullScreenImage];

        __strong __typeof__(weakSelf) strongSelf = weakSelf;
        if ([strongSelf.scrollView viewWithTag:tagNumber] != nil){

            dispatch_async(dispatch_get_main_queue(), ^{
                __strong __typeof__(weakSelf) strongSelf = weakSelf;
                if ([strongSelf.scrollView viewWithTag:tagNumber]!= nil){
                    UIImageView * tmpImageView = (UIImageView*)[strongSelf.scrollView viewWithTag:tagNumber];
                    tmpImageView.image = tmpImage;
                }
            });
        }
    });
}

- (void)loadThumbnailImageByIndex:(int)index
{
    int arrayIndex = index;
    int tagNumber = index+1;

    ALAsset *asset = [self.assetsArray objectAtIndex:arrayIndex];//

    __weak typeof(self) weakSelf = self;

    dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_BACKGROUND, 0), ^{
        UIImage *tmpImage = [[UIImage alloc] initWithCGImage:asset.aspectRatioThumbnail];        
        __strong __typeof__(weakSelf) strongSelf = weakSelf;
        if ([strongSelf.scrollView viewWithTag:tagNumber] != nil){

            dispatch_async(dispatch_get_main_queue(), ^{
                __strong __typeof__(weakSelf) strongSelf = weakSelf;
                if ([strongSelf.scrollView viewWithTag:tagNumber]!= nil){
                    UIImageView * tmpImageView = (UIImageView*)[strongSelf.scrollView viewWithTag:tagNumber];
                    tmpImageView.image = tmpImage;
                }
            });
        }
    });
}

- (void)manageImages
{
    int currentPage = (self.scrollView.contentOffset.x / self.currentImageSize.width);

    if (currentPage != self.currentPageNum){
        [self loadThumbnailImageByIndex:self.currentPageNum]; //pg no longer visible so load thumb
        [self loadFullScreenImageByIndex:currentPage]; // load full
        self.currentPageNum = currentPage;// store
    }
}

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
    [self manageImages];
}