使用延迟加载在scrollview上加载图像

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

签出该库这是一个通用的UIScrollView，可以像UITableView一样重用其子视图（有一个dataSource对象，用于配置滚动视图子视图）

Answer 3

利用scrollview的委托函数，内容大小和内容插入属性