Loading images on scrollview using lazy loading - ios

Question

I am working on an app in which I need to load nearly 211 images in a scrollview.
What I was doing was I was converting the images in binary format (NSData) and saving them in core data. Then retrieving them and populating them on the scrollview.
it does work, but sometimes it does throw "Memory warning".
I learned that lazy loading is a way to achieve this. But, I am not totally aware of how it is done.
Like, loading 3 or 5 images ahead/back of the image visible currently on the scrollview.
Can any bode help me with a simple example, which would help me understand from scratch ? and would point me in the right direction.
Thank you for your time.

Answer 1

Well, it is not needed to store images into core data. Just take all image URLs into NSMutableArray and try to use following code as per your requirement.Hope this helps you.
Try this code -
friendsScrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 470, 320, 100)];
friendsScrollView.contentSize = CGSizeMake([meetUPFrndNameArray count] * 95,50);
friendsScrollView.backgroundColor = [UIColor clearColor];
friendsScrollView.delegate = self;
[self.view addSubview:friendsScrollView];
int imageX = 25,imageY = 20;
int backImageX = 10, backImageY = 10;
int flag = 0;
for (int i = 0; i < [meetUPFrndPhotoArray count]; i++) {
flag ++;
NSArray *paths = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory,NSUserDomainMask, YES);
NSString *documentsDirectory = paths[0];
NSString *savedImagePath = [documentsDirectory stringByAppendingPathComponent:meetUPFrndPhotoArray[flag-1]];
UIImage *img1 = [UIImage imageWithContentsOfFile:savedImagePath];
if (!img1 || [UIImagePNGRepresentation(img1) length] <=0)
{
id path = meetUPFrndPhotoArray[flag-1];
path = [path stringByReplacingOccurrencesOfString:#" " withString:#"%20"];
NSURL *url = [NSURL URLWithString:path];
NSMutableArray *arr = [[NSMutableArray alloc] initWithObjects:url, [NSString stringWithFormat:#"%d", flag], nil];
[self performSelectorInBackground:#selector(loadImageInBackground:) withObject:arr];
UIImageView *frndBackgroundImage = [[UIImageView alloc] initWithFrame:CGRectMake(backImageX, backImageY, 80, 80)];
frndBackgroundImage.image = [UIImage imageNamed:#"friend_image_background.png"];
frndBackgroundImage.backgroundColor = [UIColor clearColor];
frndBackgroundImage.layer.borderWidth = 2.0;
frndBackgroundImage.layer.masksToBounds = YES;
frndBackgroundImage.layer.shadowOffset = CGSizeMake(0, 1);
frndBackgroundImage.layer.shadowOpacity = 1;
frndBackgroundImage.layer.shadowRadius = 1.2;
frndBackgroundImage.layer.cornerRadius = 5.0;
frndBackgroundImage.layer.borderColor = [[UIColor clearColor] CGColor];
[friendsScrollView addSubview:frndBackgroundImage];
UIImageView *friendImage = [[UIImageView alloc] initWithFrame:CGRectMake(imageX, imageY, 50, 50)];
friendImage.tag = flag;
friendImage.image = [UIImage imageNamed:#"ic_user.png"];
[friendsScrollView addSubview:friendImage];
}
else
{
UIImageView *frndBackgroundImage = [[UIImageView alloc] initWithFrame:CGRectMake(backImageX, backImageY, 80, 80)];
frndBackgroundImage.image = [UIImage imageNamed:#"friend_image_background.png"];
frndBackgroundImage.backgroundColor = [UIColor clearColor];
frndBackgroundImage.layer.borderWidth = 2.0;
frndBackgroundImage.layer.masksToBounds = YES;
frndBackgroundImage.layer.shadowOffset = CGSizeMake(0, 1);
frndBackgroundImage.layer.shadowOpacity = 1;
frndBackgroundImage.layer.shadowRadius = 1.2;
frndBackgroundImage.layer.cornerRadius = 5.0;
frndBackgroundImage.layer.borderColor = [[UIColor clearColor] CGColor];
[friendsScrollView addSubview:frndBackgroundImage];
UIImageView *friendImage = [[UIImageView alloc] initWithFrame:CGRectMake(imageX, imageY, 50, 50)];
friendImage.tag = flag-1;
friendImage.image = img1;
[friendsScrollView addSubview:friendImage];
}
backImageX = backImageX + 80 + 10;
backImageY = 10;
imageX = imageX + 50 + 25 + 15;
imageY = 20;
}
Here meetUPFrndPhotoArray contains image URLs.
And
For Downloading images in Background -
- (void) loadImageInBackground:(NSArray *)urlAndTagReference{
NSData *imgData = [NSData dataWithContentsOfURL:urlAndTagReference[0]];
UIImage *img = [[UIImage alloc] initWithData:imgData];
NSMutableArray *arr = [[NSMutableArray alloc] initWithObjects:img, urlAndTagReference[1], nil];
[self performSelectorOnMainThread:#selector(assignImageToImageView:) withObject:arr waitUntilDone:YES];
}
For Assigning downloaded image to perticular imageView -
- (void) assignImageToImageView:(NSArray *)imgAndTagReference{
for (UIImageView *checkView in [friendsScrollView subviews] ){
if ([imgAndTagReference count] != 0) {
if ([checkView tag] == [imgAndTagReference[1] intValue]){
[checkView setImage:imgAndTagReference[0]];
NSArray *paths = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory,NSUserDomainMask, YES);
NSString *documentsDirectory = paths[0];
NSString *savedImagePath = [documentsDirectory stringByAppendingPathComponent:meetUPFrndPhotoArray[[imgAndTagReference[1] intValue]-1]];
UIImage* imageToSave = [checkView image];
NSData *imageData = UIImagePNGRepresentation(imageToSave);
[imageData writeToFile:savedImagePath atomically:NO];
}
}
}
}
Let me know if this helps you.Thanks in advance.All the best.

Answer 2

Make use of delegate functions, content size and content inset properties of the scrollview

Answer 3

Checkout this library It's a generic UIScrollView that reuses it's subviews like UITableView does (there is a dataSource object which is used to configure scroll view subviews)