如何在iOS中加载大量图像？

Question

I am developing an app which displays large number of images. when i'm loading images there's is no problem on loading of 1000 images when the image crosses the 1000 the app crashes and memory issues raised. How to solve it? Is there any way. Kindly help me?

Thanks in Advance

Answer 1

Your app is crashing due to consuming too much memory. So you need a strategy to manage the memory your app uses.

You need to set up a pooling-type system where you only load those images that might be displayed "soon".

For example, if the user is looking at image 500, you could have 498, 499, 501, and 502 loaded into memory.

If they move to image 501, then you deallocate 498, and load 503.

What constitutes "soon" is dependent upon how your app's flow works, but you should be able to come up with something workable.

Answer 2

You need to come up with a tableview-like system.

If you look at them, all cells aren't loaded at the same time ; you can experience this if you load your app with a tableview, then put a breakpoint in cellforrow, and you'll see it being called when you start scrolling.

Because all cells aren't loaded at once.

You need a similar logic with your images ; you should NEVER load all of them at once. And if you have a reason to, then I strongly suggest loading a thumbnail version of them ( a really low quality version of them, for a grid-like view of all your pictures, for example ).

To achieve that you need to know what pictures need to be immidatly visible, and what pictures are likely to be visible soon. For small numbers let's say you have 10 pictures total (instead of 1000).

User is loading the app, and can see picture 1 and 2 on the screen. You'll obviously load them straight away, as well as picture 3 and most probably picture 4 (just to make sure). When he scrolls, you KNOW that he is scrolling and your need a method that reads that scroll to allocated the right pictures dynamically. You'll deallocate picture 1 first (because its the first to go away ) and start loading picture 5.

That way, instead of having 1000 pictures loaded, you have only up to 5 (depending on the size obviously).

A really good example is the 9gag app, which loads pictures right under the screen, which means by the time you read the first gag, the next one is already loaded. The "only" way to see it load is to scroll a bit faster or to have a poor connection.

This logic is, to me, the most reliable and effective way to load a big amount of data, wether it is pictures or anything else.

Using stuff like cache, arrays, scrollview(s) and maybe files (depending on your app really) is a good starting point.

Answer 3

Probably you're getting the image-date from some API, because it's ridiculous to save it into device.. :)

My solution is to work with UITableView or UICollectionView depends on what design flow you're are choosing, because those UIComponents will manage memory for you aka will allocate the visible once + 5 down and + 5 up, and deallocate the others.

Also you will need to download the image-date asynchronically , so you won't block the main UI - thread.

Now... if i were you, I'll definitely go for third party library such as AFNetworking in your case, its best for handling JSON data from server, also have very good error handling.

Here I'll post a method witch is for downloading image-data from server.

- (void)downloadImageAsynchronicallyByUrlString:(NSString *)url forIndexPath:(NSIndexPath *)indexPath {
    // Perofrm request
    AFHTTPRequestOperation *requestOperation = [[AFHTTPRequestOperation alloc]initWithRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:url]]];
    [requestOperation setResponseSerializer:[AFImageResponseSerializer serializer]];
    [requestOperation setCompletionBlockWithSuccess:^(AFHTTPRequestOperation *operation, id responseObject) {

        // IF SUCCSESS send dataSource SUCCSESS message
        [dataSource downloadFinished:responseObject forIndexPath:indexPath];

    } failure:^(AFHTTPRequestOperation *operation, NSError *error) {

        // IF FAIL send dataSource FAIL message
        [dataSource downloadFailAtIndexPath:indexPath];
    }];

    // Start request!!!
    [requestOperation start];
}

Explanation:

You call every time this method in cellForRowAtIndexPath at your tableView or itemForRowAtIndexPath if you use collectionView and I'm using a protocol to handle when responseObject aka theImage to send the responseObject via protocol method.

In your UIClass where your tableView pr collectionView lives just implement your protocol method

- (void)downloadFinished:(UIImage *)image forIndexPath:(NSIndexPath *)indexPath {

    // Creating copy of cell
    _lecturerCell = (LecturersCell *)[_lecturersTableView cellForRowAtIndexPath:indexPath];
    // Set downloaded image
    [_lecturerCell setLecturerImage:image];
}