How to add activity indicator to the image in UITableView?

Question

I have created the Custom tableView and using custom tableView class in Other class to Show the tableView..

I am Loading the image from Server and displaying it in the tableViewRow.. each image is different in it..

On Screen only 7 out of 10 images will come, and when I scroll down the first 3 images are repeating for some time and when those images get load its showing proper images.. but initially till new images will come its showing old images, I want to put a activity indicator to show that the images are loading instead of old images..

I want to add activity Indicator in the place of image, till the image get load..

My code is...

self.tableViewX = tableView;
static NSString *simpleTableIdentifier = @"SimpleTableCell";
SimpleTableCell *cell = (SimpleTableCell *)[tableView1 dequeueReusableCellWithIdentifier:simpleTableIdentifier];
 if (cell == nil)
{
    NSArray *nib = [[NSBundle mainBundle] loadNibNamed:@"SimpleTableCell" owner:self options:nil];
    cell = [nib objectAtIndex:0];
}
dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^
    {
NSString *imageURL = [NSString stringWithFormat: @"www.xyz.image.png"];
cell.thumbnailImageView.image = [UIImage imageWithData:[NSData dataWithContentsOfURL:[NSURL URLWithString:imageURL]]];
 });

Please assist me with some sample code..

You can use asynchronous image view to achieve this .Because the image is showin like that as You are using the dequeueReusableCellWithIdentifier so make a diferent idefier or make cell is nill.. then u can achieve it — 08442, Mar 11 '13 at 04:16
http://www.raywenderlich.com/4295/multithreading-and-grand-central-dispatch-on-ios-for-beginners-tutorial — βhargavḯ, Mar 11 '13 at 04:19
@08442 : How to use asynchronous image view? do you have any sample code from which i can understand it.. — Raju, Mar 11 '13 at 04:26
Cant i create the subView of image so that the activity indicator will work till the image is loaded? — Raju, Mar 11 '13 at 04:30

Pratik · Accepted Answer · 2013-03-11T06:34:18.940

4

You can use "AsyncImageView" class files it will load image synchronically and it shows the activity indicator while image loading

You can download "AsyncImageView" class files from following link:- https://www.dropbox.com/s/peazwjvky9fsjd7/Archive.zip

in .m file import AsyncImageView Class

 #import "AsyncImageView.h"

in your tableview cell at indexpath method

-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
     static NSString *simpleTableIdentifier = @"SimpleTableCell";
     SimpleTableCell *cell = (SimpleTableCell *)[tableView1 dequeueReusableCellWithIdentifier:simpleTableIdentifier];
     if (cell == nil)
     {
           NSArray *nib = [[NSBundle mainBundle] loadNibNamed:@"SimpleTableCell" owner:self options:nil];
      cell = [nib objectAtIndex:0];
     }
     NSString *imageURL = [NSString stringWithFormat: @"www.xyz.image.png"];
     AsyncImageView *async = [[AsyncImageView alloc]initWithFrame:CGRectMake(0, 0, width, height)];
     [async loadImageFromURL:[NSURL URLWithString:imageURL]];
     [cell.thumbnailImageView addSubview:async];
}

try this your problem will solve.

edited Mar 11 '13 at 06:34

answered Mar 11 '13 at 04:39

Pratik

2,399
17
36

what will this "[async loadImageFromURL:[NSURL URLWithString:strThumbImageUrl] imageName:@""];" statement will do? and what is strThumbImageUrl? is it same as imageURL? – Raju Mar 11 '13 at 05:11
this is your image url please check answer now i have edit the answer – Pratik Mar 11 '13 at 05:32
its showing the error "No visible @interface for 'AsyncImageView' declares the selector 'loadImageFromURL:imageName:'" – Raju Mar 11 '13 at 06:02
this is asyncImageView class files method remove imagename:@"" and try look i have edit the code – Pratik Mar 11 '13 at 06:07
i also tried "[async loadImageWithURL:[NSURL URLWithString:imageURL]]" but its still showing "No visible @interface for 'AsyncImageView' declares the selector 'loadImageWithURL:'" error.. – Raju Mar 11 '13 at 06:12
please use below another class files download it from below link https://www.dropbox.com/s/peazwjvky9fsjd7/Archive.zip – Pratik Mar 11 '13 at 06:21
@Raju Try changing the `loadImageFromURL` to `loadImageWithURL:(NSURL*)url` as the interface has this method in it:- `- (void)loadImageWithURL:(NSURL *)URL;`. – Zen Mar 11 '13 at 06:28
@Pratik Edit your answer to match the method name. Make it `loadImageWithURL:(NSURL*)`. – Zen Mar 11 '13 at 06:37
how can i add the image from the system to this async class? i have one image in supported files.. how can i load this image to async class? – Raju Mar 11 '13 at 06:49
@zen: i have tried that also.. " loadImageFromURL to loadImageWithURL:(NSURL*)url as the interface has this method in it:- - (void)loadImageWithURL:(NSURL *)URL;" but that was showing some error.. – Raju Mar 11 '13 at 06:53
@Raju What is that error. And for loading local images, Check the demo out. He loads images from both local and online resources. Go through that. – Zen Mar 11 '13 at 06:56
@zen :error was "'AsyncImageView' declares the selector 'loadImageWithURL:'" – Raju Mar 11 '13 at 07:04
actually i got the solution.. but when i am not getting how to load the local image to same async class.. and when i am trying "cell.thumbnailImageView.image = [UIImage imageNamed:@"imageLock.png"];" its getting struck some times.. – Raju Mar 11 '13 at 07:06
https://github.com/nicklockwood/AsyncImageView Did you download this from here. You can see the demo code in it. – Zen Mar 11 '13 at 07:29
I am doing it like this and its getting struck at some places.. "if ([UIImage imageWithData:[NSData dataWithContentsOfURL:[NSURL URLWithString:imageURL]]] == nil) { AsyncImageView *async = [[AsyncImageView alloc]initWithFrame:CGRectMake(0, 0, 50, 50)]; NSString *lockImage = [[NSBundle mainBundle] pathForResource:@"imageLock" ofType:@"png"]; [async loadImageFromURL:[[NSURL alloc] initFileURLWithPath:lockImage]]; [cell.thumbnailImageView addSubview:async]; } else { image From Server } – Raju Mar 11 '13 at 09:46

How to add activity indicator to the image in UITableView?

1 Answers1

Linked