UICollectionView Stuck when loading multiple images from Document directory

Question

I'm loading more than 30-50 images, which are stored in document directory. They all images are loaded immediately in collectionView, but when scroll collectionView at that time it will stuck.

- (__kindof UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *cellIdentifier = @"ImageCell";
    ImageCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:cellIdentifier forIndexPath:indexPath];

    //Load image from document  directory
    NSString *imageName = [arrCollection objectAtIndex:indexPath.row];
    NSString *imagePath = [NSString stringWithFormat:@"%@/%@",(AppObj).imagefolderPath, imageName];
    UIImage *localImg = [[UIImage alloc]initWithContentsOfFile:imagePath];

    cell.imgSketch.image = localImg;

    cell.txtName.text = [NSString stringWithFormat:@"%@",[imageName stringByReplacingOccurrencesOfString:@".png" withString:@""]];

    cell.layer.masksToBounds = YES;
    return cell;
}

I also tried following dispatch block

dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_BACKGROUND, 0), ^{
                UIImage *localImg = [[UIImage alloc]initWithContentsOfFile:[NSString stringWithFormat:@"%@/%@",(AppObj).imagefolderPath,[arrCollection objectAtIndex:indexPath.row]]];
                dispatch_async(dispatch_get_main_queue(), ^{
                    cell.imgSketch.image = localImg;
                });
            });

Please suggest me any solution to overcome from this problem.

Thanks in advance

the best solution is use some image cache library like SDWebImage, its very easy to use and load and cache images in a async way. https://github.com/rs/SDWebImage — vivekDas, Aug 07 '18 at 10:53
@vivekDas I think SDWebImage is used when We want to load image from Web URL — Monika Patel, Aug 07 '18 at 11:10
You can try with the imagePath instead of web url to check, if it works. — vivekDas, Aug 07 '18 at 11:16
@vivekDas `[cell.imgSketch sd_setImageWithURL:[NSURL URLWithString:[NSString stringWithFormat:@"%@/%@",(AppObj).imagefolderPath,[arrCollection objectAtIndex:indexPath.row]]]];` I have tried this one, but it is not working — Monika Patel, Aug 07 '18 at 11:20
1st say your dispatch_async is working or not regarding stuck issue ? then you can think of caching. — vivekDas, Aug 07 '18 at 11:24
@MonikaPatel Instead of `URLWithString` use `fileURLWithPath` like this. `[cell.imgSketch sd_setImageWithURL:[NSURL fileURLWithPath:[NSString stringWithFormat:@"%@/%@",(AppObj).imagefolderPath,[arrCollection objectAtIndex:indexPath.row]]]];` — Nirav D, Aug 07 '18 at 11:53

score 1 · Accepted Answer · answered Aug 07 '18 at 12:23

1

You can use SDWebImage it also display image from document directory.

[cell.imgSketch sd_setImageWithURL:[NSURL fileURLWithPath:[NSString stringWithFormat:@"%@/%@",(AppObj).imagefolderPath,[arrCollection objectAtIndex:indexPath.row]]]];

Note: Use fileURLWithPath when you are creating object of NSURL because its path of the file.

answered Aug 07 '18 at 12:23

Nirav D

71,513
12
161
183

How to remove image which are stored in cache? I have tried this one but it is not working `[[SDImageCache sharedImageCache] removeImageForKey:[NSString stringWithFormat:@"%@/%@",(AppObj).imagefolderPath,[arrCollection objectAtIndex:sender.tag]] fromDisk:YES withCompletion:nil];` – Monika Patel Aug 07 '18 at 13:47
@MonikaPatel Actually this should work, code looks correct, how you know that image is not deleting from cache? – Nirav D Aug 07 '18 at 13:50
Actually my application is work only in local, now user can import multiple images from gallery to my application. All images name is in this sequence img1,img2,im3....n. Now the point is if user select 3 images and import all 3 imgs in my application. So now image name is assign img1,img2,im3. Now user delete this 3 images and import new 3 images. Again image name will img1,img2,img3. So these img1,img2,img3 image get old image from cache. and it will show old deleted image insted of new 3 selected images. – Monika Patel Aug 07 '18 at 13:56
@MonikaPatel Can you please try once clearing the cache for all image please check this answer for more details https://stackoverflow.com/a/39881690/6433023 – Nirav D Aug 07 '18 at 14:02

Shehata Gamal · Answer 2 · 2018-08-07T10:36:06.717

I suggest to load all the images only once out of cellForRowAt

NSMutableArray*images; // every instance is of type UIImage not imageName

instead of this

UIImage *localImg = [[UIImage alloc]initWithContentsOfFile:[NSString stringWithFormat:@"%@/%@",(AppObj).imagefolderPath,[arrCollection objectAtIndex:indexPath.row]]];

Note: this method initWithContentsOfFile runs in mainQueue so it's the main reason of the stuck

score 0 · Answer 3 · answered Aug 07 '18 at 10:34

0

What I would suggest is to move your image loading operation to background thread.

dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, NULL), ^{
   UIImage* localImage = [[UIImage alloc] initWithContentsOfFile:[NSString stringWithFormat:@"%@/%@",(AppObj).imagefolderPath,[arrCollection objectAtIndex:indexPath.row]]];    
   dispatch_async(dispatch_get_main_queue(), ^{
      cell.imgSketch.image = localImage;
   });
});

answered Aug 07 '18 at 10:34

bseh

447
7
13

Sorry but This solution I have alredy tried, but it will not work. – Monika Patel Aug 07 '18 at 10:41

Lal Krishna · Answer 4 · 2018-08-07T11:57:07.197

The collectionview/tableview cells will have flickering if we use large images. Try to use low size image or create one at cellForItemAtIndexPath in background queue.

You can improve performance by caching image in an array. Note: Try to clean it if the capacity increases a limit.

cell.imgSketch.image = nil;
dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_HIGH, 0), ^{

     UIImage *localImg = [[UIImage alloc] initWithContentsOfFile:[NSString stringWithFormat:@"%@/%@", (AppObj).imagefolderPath, [arrCollection objectAtIndex:indexPath.row]]];

     NSData *imgData = UIImageJPEGRepresentation(localImg, 0.5);
     localImg = [UIImage imageWithData:imgData];

     dispatch_async(dispatch_get_main_queue(), ^{
         ImageCell *imageCell = [collectionView cellForItemAtIndexPath:indexPath];
         if (imageCell) {
             cell.imgSketch.image = localImg;
         }
    });
});

Your code is helpful, but when I scrolling collectionView random image bind in imageview and image will change during scroll. — Monika Patel, Aug 07 '18 at 10:48
Set `cell.imgSketch.image = nil;` before load from filemanager, — Lal Krishna, Aug 07 '18 at 11:50

UICollectionView Stuck when loading multiple images from Document directory

4 Answers4