iOS Loading remote images for UITableViewCell

[youPhone]

I'm not sure how setting the indentifierCounter = 0 is solving the "unrecognized selector" error you're getting. Can you post the actual line that is throwing the error?

the old image displays until the new one is loaded

In the protocol method:

- (UITableViewCell *) tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath

Try setting the imageView.image to nil like:

MyCellClass *cell = (MyCellClass*)[tableView dequeueReusableCellWithIdentifier:kMyCellIdentifier];
if (cell == nil) {
	cell = [[MyCellClass alloc] initWithFrame:myFrame reuseIdentifier:kMyCellIdentifier];
} else {
	// Reset the cell's image so that it doesn't repeat images
	[cell.myImageView setImage:nil];
}

 

[Wunk]

I'm not sure how setting the indentifierCounter = 0 is solving the "unrecognized selector" error you're getting. Can you post the actual line that is throwing the error?


Try setting the imageView.image to nil like:

Hey that works great, thanks


The part that throws the error is pretty much the same from the examples:

- (void)loadImageFromURL:(NSURL *)anImageURL withCallbackTarget:(id)target withCallbackSelector:(SEL) selector
{
	callbackTarget = target;
	callbackSelector = selector;
	imageURL = anImageURL;
	
	NSLog(@"ImageLoader.m anImageURL = %@", imageURL);
	
	// turned off the hashing, crashes the app
	// identifierCounter = [self urlToHashString: imageURL]; 
	identifierCounter = 0;
	NSLog(@"Image naar interface gestuurd");
	DataLoaderOperation *op = [DataLoaderOperation queueDataLoadWithURL:imageURL withIdentifier:identifierCounter withCallbackTarget:self withCallbackSelector:@selector(sendImageBack:)];
	[imageLoadingQueue addOperation:op];
}

Uncommenting the above line will throw the exception, this is my urlToHashString function (it's all pretty much as in the threads):

+ (NSString*) urlToHashString:(NSURL*)aURL
{
	return [NSString stringWithFormat:@"%U",[[aURL absoluteString] hash]];
}

With identifierCounter = 0; it'll log a tidy debugger output:

2008-11-17 22:53:26.214 Kookjij-Menus[13954:a703] Send image back function. Addres for data: <3841952>
2008-11-17 22:53:26.215 Kookjij-Menus[13954:a703] send image back
2008-11-17 22:53:26.218 Kookjij-Menus[13954:a703] address for data = <3841952>
2008-11-17 22:53:26.219 Kookjij-Menus[13954:a703] ImageLoader.m am adaugat in cache imaginea pentru url= http://www.kookjij.mobi//upload//0000/7887/00007887-60x60.jpg
2008-11-17 22:53:26.221 Kookjij-Menus[13954:a703] sendImageBack inside IF
2008-11-17 22:53:26.224 Kookjij-Menus[13954:a703] Setup Image in table cell

But uncommenting the identifierCounter = [self urlToHashString: imageURL]; will throw that exception.., it's all called from the setData function I posted earlier..

 

[youPhone]

I see now.

The Identifier is supposed to be an NSInteger, but urlToHashString: returns a string.

Anyway, in my code, I made an identifierCounter static that just increments for each operation that is made. So far I haven't even used the identifier except in testing.

 

[youPhone]

I actually have a question for anyone that has made an NSOperationQueue.

I have this piece of code:

NSArray *ops = [myOperationQueue operations];
NSLog(@"operationsQueued:%U", [ops count]);

This will work in the simulator, but it does not work (only shows "operationsQueued:0") on the iphone hardware for me. I'm not sure why this is.

Could it be because this code isn't being called on the main thread?

 

[shailendra]

Still having problem

Thanks, it's great thread. It worked in the my application. But while scrolling, it does not scroll very smoothness as i saw in the AppStore & other application.
Please guide me. What i can do to scroll fast.

 

[Wunk]

Got it working perfectly so far, thanks for the tips

Also, would it be easy to cache for example the last 10 or 20 images loaded ?, I've been tailing the webserver log when running this app and it's stressing the webserver fairly heavily due to continuous requests for images already retreived when scrolling back and forth in the tableview..

It'll easily generate 5-6 requests per second, which can be a problem if there's a lot of people using the app when it's live (something we must all be aiming for ;-)

 

[Wunk]

Also, I seem to have run into a small bug after modifying it so that it will not return a key if there's no image present (makes it a lot faster too), but when scrolling back and forth really fast it'll start putting images in the wrong TableCell (probaply because it's still loading the image while the TableCell is already off screen)

I've tried setting the imageView = nil; when the objectForKey"image" == nil, but that will result in re-used cells going permanently blank.., so I made en emptyCallBackSelector which does nothing but throw a NSLog line..

The [dict objectForKey"image"] is a method to pull the "image" variable from a JSON page, if the variable doesn't exist it'll make the imageView nil.

-(void)setData:(NSDictionary *)dict {
	self.titleLabel.text = [dict objectForKey:@"naam"];
	self.urlLabel.text = [dict objectForKey:@"description"];
	self.itemID = (int)[dict objectForKey:@"id"];
	NSURL *imgUrl = [[NSURL alloc] init];

	if ([dict objectForKey:@"image"] == nil) {
		NSLog(@"No image found");
		imageLoader = [[ImageLoader alloc] init];
		[imageLoader loadImageFromURL:imgUrl withCallbackTarget:self withCallbackSelector:@selector(emptyCallbackSelector:)];
	} else {
		NSLog(@"Image found"); 
		imgUrl = [NSURL URLWithString:[dict objectForKey:@"image"]];
		imageLoader = [[ImageLoader alloc] init];
		[imageLoader loadImageFromURL:imgUrl withCallbackTarget:self withCallbackSelector:@selector(setupImage:)];
	}
}
- (void) setupImage:(UIImage *) anImage
{
	UIApplication* app = [UIApplication sharedApplication];
	app.networkActivityIndicatorVisible = YES; // Activity indicator starten bij laden plaatje
	NSLog(@"Setup Image in table cell");
	UIImage *loadImage = [[UIImage alloc] init];
	loadImage = anImage;
	[imageView setImage:loadImage];
	app.networkActivityIndicatorVisible = NO; // indicator uit als plaatje geladen is

}

 

[shailendra]

Loading remote images for UITableViewCell

Hi, when i scrolling, the images again reload in cell. I don't want to call the same images again. Once it is assigned into cell, it should not call while scrolling.What is the way to store images so that same image url need not to call again.

 

[Wunk]

Anyone else seeing issues with these threaded imageloader functions ?, they worked almost flawlessly in the 2.1 firmware release on the iPhone itself, but it's calling some bad mojo in the 2.2 firmware.

If I load a local file through the ImageLoader (gif) it works fine, but the moment it starts loading external images it starts borking. Strange thing is that I can't reproduce this on the simulator..

So this works (this is called when no remote image is found):

		NSString *path = [[NSBundle mainBundle] pathForResource:@"blank-60x60" ofType:@"gif"];
		imgUrl = [NSURL fileURLWithPath: path];
		imageLoader = [[ImageLoader alloc] init];
		[imageLoader loadImageFromURL:imgUrl withCallbackTarget:self withCallbackSelector:@selector(setupImage:)];

And this throws a 'Program received signal: “EXC_BAD_ACCESS”.' error:

		imgUrl = [NSURL URLWithString:[dict objectForKey:@"image"]];
		imageLoader = [[ImageLoader alloc] init];
		[imageLoader loadImageFromURL:imgUrl withCallbackTarget:self withCallbackSelector:@selector(setupImage:)];

Anyone else seeing this ?




edit: never mind, I found a [blah release] in my code where it wasn't alloc'ed in the first place, removing that fixed my problem..

Please walk along, nothing to see here

 

[amitATwap]

I followed your code, used ImageLoader, DataLoaderOperation class.
but the scrolling is not that smooth, everytime scrolling happen image from the URL loaded.

you guys getting glassy scrolling...if yes then please share your experience.

Cheers,
Amit

 

[debtman7]

Ok, so this thread is a bit old, but it's about the only good example that turns up for remote images in a tableview.

So, just to chime in, I've played with it and unless the folks here know something I don't, I've come to the conclusion that the approach described here just isn't workable. The problem I ran into is that by the time the image downloads and performs the callback on the table cell, it's quite possible that that cell has already been reused (i.e. the user is scrolling) and the image pops up in the wrong place. In addition, since this code handles image loading during the cell setup phase, it means it will try to load images even if the user is quickly scrolling through the list, when we really don't need to show them, and this causes poor performance on scrolling since we're trying to update cell images very quickly during a fast scroll.

When you look at it, we don't need images when the cell is whizzing by. We just need them when the user is looking at a row of cells. So, I've played around with another approach that seems workable.

What I'm doing right now is implementing a custom ImageCellView. It really has almost no custom code, except it adds an imageSrc property. When the cell is created in the tableviewcontroller, it sets this to the url for the image.

To load images, I'm implementing

- (void)scrollViewDidEndDeceleratingUIScrollView *)scrollView

When that fires it fetches all the visible cells from the table, and loads data from their imageSrc property into the cell image and caches it. And that's about it.

The advantage here is that we're not loading any images during a scroll. We're not using any callbacks on cells which may be reused. Performance is *much* better this way and it avoids caching any unnecessary items saving memory (do we really want to load and cache hundreds of images for rows that users zoom right by?).

I need to hash out some more implementation details, most notably make it threaded since my current minimalistic implementation will block the UI. I'm going to have it pass off the image loading to an NSOperation class like the one described here, but only once the scrolling ends. If the scrolling starts again, then cancel all of those requests.

I've also contemplated starting a thread early on to just start going through the list and populating the cache. With this approach it's pretty easy to do, in that thread or in the data loader, just need to check the cache and only fetch if there is a miss. On the flip side though, if your app has a lot of these, that may eat up memory pretty quickly. I'm scaling them to 40x40 before caching, but it ads up.

 

[youPhone]

I've done a lot of work to my image loading class since this thread. I never fully described my approach (by giving away the code), because I thought my approach needed work and others might come up with better ideas and shoot them out.

My approach now involves making the ImageLoader a singleton class (a decision I'm still not sure is the right one). Also, instead of sending the UIImage or imageData back in the callback, I made a new class similar to yours that has the image source URL so that you can check to make sure it is to correct image and the correct cell before setting the image.

That's a good idea using scrollViewDidEndDecelerating: to load the cells. I never saw that. Thanks for you input!

 

[youPhone]

I also forgot to mention. I think it would be really slick to have sqlite caching of the images (that is, if you want your application to save images to disk for later use). Right now I'm just saving the image data to disk and saving a NSMutableSet to disk to keep track of all the items saved to disk. Though, I may never switch to the sqlite method since I already have this working well enough.

 

[Wunk]

I'm actually still programming my app (slowly getting there ) and using your imageloader class as it is earlier in this thread. It's so the best method I've seen code-wise so far..

I was planning on going over it at a later stage to improve performance and iron out the bugs when a user is scrolling pretty fast and a wrong image is loaded, but I haven't come around to it yet.

The Appstore image loader is damn nice, but I haven't seen something like that yet.

I'm going to look at that scrollViewDidEndDecelerating method, that looks like a good performance boost

 

[estupefactika]

Hi, Im trying to follow the examples explained here. Im not using Interface Builder, it works but I cant put the image in their respective row. All images are display in the first row, im doing some wrong...


In cellForRowAtIndexPath i try to display the image with a UIImageView

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
...
		CGRect formulaRect = CGRectMake(0.0, 0.0, 75.0, 75.0);
		UIImage *formulaImage = [UIImage imageNamed:@"blank.png"];
		img = [[[UIImageView alloc] initWithFrame:formulaRect] initWithImage:formulaImage];
		[cell.contentView addSubview:img];
return cell;
}

Im using the NSOperation to download images and the callback method where it has to display the images, like these guys have explained before:

-(void) testCallbackSelector: (UIImage *) image
{
	NSLog(@"testCallbackSelector received image with address <%U>", image);
	UIImage *loadImage = [[UIImage alloc] init];
	loadImage = image;
	
	[img setImage:loadImage];
}

All images are display in the first row instead of their respective row. Surely Im doing some wrong, any help?

 

[Wunk]

I actually implemented it right away, it's a LOT smoother now.., it's still a bit rough at the edges, but scrolling through a table goes as a warm knife through butter ..

What I basically did is split up my setData function (a few posts up) into two parts, one for just the data, and a function calling the imageLoader:

-(void)setData:(NSDictionary *)dict {
	self.titleLabel.text = [dict objectForKey:@"naam"];
	self.urlLabel.text = [dict objectForKey:@"description"];
	self.itemID = (int)[dict objectForKey:@"id"];
}
-(void)setImage:(NSDictionary *)dict {
	NSURL *imgUrl = [[NSURL alloc] init];
	imageLoader = [[ImageLoader alloc] init];
	if ([dict objectForKey:@"image"] == nil) {
		NSString *path = [[NSBundle mainBundle] pathForResource:@"blank-60x60" ofType:@"gif"];
		imgUrl = [NSURL fileURLWithPath: path];
		[imageLoader loadImageFromURL:imgUrl withCallbackTarget:self withCallbackSelector:@selector(setupImage:)];
	} else {
		imgUrl = [NSURL URLWithString:[dict objectForKey:@"image"]];
		[imageLoader loadImageFromURL:imgUrl withCallbackTarget:self withCallbackSelector:@selector(setupImage:)];
	}
}

Then I added the scrollview functions which set a flag based on if the scrollview is starting to move or stopping to move:

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {
	NSLog(@"Decelerating");
	self.AccelerationQueue = @"1";
	[self.menuTabel reloadData]; // reload the table so the images show up
}

-(void)scrollViewWillBeginDecelerating:(UIScrollView *)scrollView {
	NSLog(@"Accelerating");
	self.AccelerationQueue = @"0";
}

And I changed the cellForRowAtIndexPath so it looks if the AccelerationQueue flag is set:

- (UITableViewCell *)tableView:(UITableView *)menuTabel cellForRowAtIndexPath:(NSIndexPath *)indexPath {
	static NSString *CellIdentifier = @"Cell";
	ReceptCategorieenImageCell *cell = (ReceptCategorieenImageCell *)[menuTabel dequeueReusableCellWithIdentifier:CellIdentifier];
	if (cell == nil) {
reuseIdentifier:CellIdentifier] autorelease];
		cell = [[[ReceptCategorieenImageCell alloc] initWithFrame:CGRectZero reuseIdentifier:CellIdentifier] autorelease];
	} else {
		[cell.imageView setImage:nil];
	}
	NSDictionary *itemAtIndex = (NSDictionary *)[self.jsonArray objectAtIndex:indexPath.row];
	if ( self.AccelerationQueue == @"0" ) {
		[cell setData:itemAtIndex]; // only load the text data
	} else {
		[cell setImage:itemAtIndex]; // set the imagedata after acceleration stopped
		[cell setData:itemAtIndex];
	};
	cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator;
	return cell;

}

It needs some cleaning up though, the main issue here still, is that it will call the reloadData on the table even if it moved a little bit, so it will cause some overhead on downloading images again after only scrolling a tiny bit.., but it'll lessen the download and CPU load on the iPhone a lot when scrolling through long tables.

edit: the AccelerationQueue variable is nothing more then a NSString in the header with the retain flag set by the way.. (in case you're wondering where that came from)

 

[Wunk]

Hi, Im trying to follow the examples explained here. Im not using Interface Builder, it works but I cant put the image in their respective row. All images are display in the first row, im doing some wrong...

All images are display in the first row instead of their respective row. Surely Im doing some wrong, any help?

Try using a seperate UITableViewCell subclass for that, see http://iphone.zcentric.com/2008/08/05/custom-uitableviewcell/ for an example..

You can then setup the position of the image through the - (void)layoutSubviews function with something like

self.imageView.frame = CGRectMake(boundsX + 251, 4, 63, 59);

where imageView is the UIImageView outlet

 

[estupefactika]

Hi Wunk, Ive just modified my separate UITableViewCell but now I receive an "EXC_BAD_ACCESS" when callback 'testCallbackSelector' has to display images, exactly in line [img setImage:loadImage];, the first times it works, but it fails after. Any idea?

-(void) setData:(NSDictionary *) dict
{
	
	titulo.text=[dict objectForKey:@"titulo"];
	entradilla.text=[dict objectForKey:@"entradilla"];
		
	NSURL *imgUrl = [[NSURL alloc] init];
	imgUrl = [NSURL URLWithString:[dict objectForKey:@"img"]];	
	
	imageLoader = [[ImageLoader alloc] init];	
	[imageLoader loadImageFromURL:imgUrl withCallbackTarget:self withCallbackSelector:@selector(testCallbackSelector:)];
}


-(void) testCallbackSelector: (UIImage *) image
{
	NSLog(@"testCallbackSelector received image with address <%U>", image);
	UIImage *loadImage = [[UIImage alloc] init];
	loadImage = image;
	[img setImage:loadImage];	
}

 

[dejo]

Not sure on your EXC_BAD_ACCESS, but this right here is a memory leak:

	UIImage *loadImage = [[UIImage alloc] init];
	loadImage = image;

No need to alloc the loadImage if you're just going to reassign it to image anyways. This is better:

	UIImage *loadImage = image;

 

[Wunk]

Hi Wunk, Ive just modified my separate UITableViewCell but now I receive an "EXC_BAD_ACCESS" when callback 'testCallbackSelector' has to display images, exactly in line [img setImage:loadImage];, the first times it works, but it fails after. Any idea?

I ran into some issues back there too with the examples here, the testCallbackSelector isn't used except in debugging your code.., but aside from that, if you're receiving a EXC_BAD_ACCESS, then it's most likely because you released something that you still need. So you either shouldn't release it (yet) or alloc it again..

The code I'm using in the ImageCell subclass is:

-(void)setImage:(NSDictionary *)dict {
	NSURL *imgUrl = [[NSURL alloc] init];
	imageLoader = [[ImageLoader alloc] init];
	if ([dict objectForKey:@"image"] == nil) {
		NSString *path = [[NSBundle mainBundle] pathForResource:@"blank-60x60" ofType:@"gif"];
		imgUrl = [NSURL fileURLWithPath: path];
		[imageLoader loadImageFromURL:imgUrl withCallbackTarget:self withCallbackSelector:@selector(setupImage:)];
	} else {
		imgUrl = [NSURL URLWithString:[dict objectForKey:@"image"]];
		[imageLoader loadImageFromURL:imgUrl withCallbackTarget:self withCallbackSelector:@selector(setupImage:)];
	}

}

- (void) setupImage:(UIImage *) anImage
{
	UIApplication* app = [UIApplication sharedApplication];
	app.networkActivityIndicatorVisible = YES; 
	UIImage *loadImage = [[UIImage alloc] init];
	loadImage = anImage;
	[imageView setImage:loadImage];
	app.networkActivityIndicatorVisible = NO; 
}

Take note that it's calling a blank-60x60.gif when no image is found in the @"image" dict.., so it will probaply crash if it doesn't exist..

 

[youPhone]

I just had an idea. I think I'm going to subclass UIImageView to have a class that does all of the asynchronous work behind the scenes so the UIViewController doesn't see what is going on. From the view controller you just

MyImageView *myImageView = [[MyImageView alloc] initWithURL:someURL];

Also, I had advocated for using a method such as:

loadImageFromURL:withCallbackTarget:withCallbackSelector:

But really, I think this should be done with a protocol and delegate, meaning the ImageLoader class can't be a singleton. Right now mine is implemented as a singleton so I'm having to keep using the above method. But if you were to have instances of ImageLoader, you could call it inside MyImageView (as explained above):

ImageLoader *loader = [[[ImageLoader alloc] initWithURL:someURL 
                                           withDelegate:self] autorelease];

Now MyImageView will implement whatever protocol method you defined in ImageLoader, such as:

@protocol
- (void) setImageViewWithImage:(UIImage*)someImage fromURL:(NSURL*)someURL;
@end

So in MyImageView:

- (void) setImageViewWithImage:(UIImage*)someImage fromURL:(NSURL*)someURL
{
	if ([self.url isEqualToURL:someURL]) {
		self.image = someImage;
	}
}

I've left isEqualToURL for you to figure out. I don't think I have the best solution for that. Let me know what you're (whoever you are) solution is and we'll see if it's better than mine. I don't want to first corrupt you with my idea. (I basically compare the absoluteString of each URL in isEqualToString -- I suspect the isEqualToString is fairly optimized, so I think it should be a pretty good method)


So now you don't have to keep an instance of ImageLoader around as an instance variable in whatever class you're using it in (should probably only be used in MyImageView in this case - but you could using elsewhere).

 

[estupefactika]

Hi Wunk, you was right, I had a released object I still need, it works thanks.

It download the images and display them after, correct.

Now when I do scroll with images already downloaded it does the same operations again, It back to alloc a imageLoader and to download it again. Is this so? or Should I control it?

I had thought to save images in disk once downloaded to not resort to url always, so it would allow to use the app offline.

Im not going to have much images, its a good idea to save in disk?

 

[estupefactika]

It is possible to do the same process twice? i.e, once for downloading only the images from my table and a second time to download the rest of images of my xml file.

I would like that while images from the table are being downloaded and displayed, continue downloading the rest of images of my xml in background.

I have done a little test but when it downloads the rest of images I only get some, not everything

Could it have a conflict for using the same ImageLoader class? Any idea? thanks

Edit: Ive create two classes.

i would like to pass a second parameter on callback method:

if ([callbackTarget respondsToSelector:callbackSelector]) {
		[callbackTarget performSelector:callbackSelector withObject:thisImage withObject:imageURL];
	}

How can I add other param in this method to get the imageUrl too?

-(void) setupImage: (UIImage *) image
{	
....	
	
}

 

[kwarren]

I mistakenly created a new thread for this problem, but as dejo pointed out, it probably belongs in here.

So, basically I have a glorified RSS reader. It works great: the NSMutableArray of entries shows up in a standard UITableview, and if you select a row, it loads the entry in the app's browser. But, now that I know a little bit more (this is my first app), I'd like to put an image on the side of the table like in the YouTube app or the iPod when you sort by album. Although I haven't messed with it, I mostly understand how you would do this if you were using a static image, but my app will be pulling the thumbnail that is in each RSS entry (for this app it's a YouTube feed). I already have keys/objects set for the title, link, summary, and date, so I imagine I'd have to put in something similar for the image? Can anyone help me further? I've been working on this for a few days, and I'm rather stumped. I've examined the SeismicXML example, but again, those are images in the project file, not being pulled from the web.

Thanks for all the help on this forum. I know I'm not the only one with a question like this, and without Mac Rumors, my first app would have taken far longer!

 

[youPhone]

It is possible to do the same process twice? i.e, once for downloading only the images from my table and a second time to download the rest of images of my xml file.

I would like that while images from the table are being downloaded and displayed, continue downloading the rest of images of my xml in background.


I have done a little test but when it downloads the rest of images I only get some, not everything

I'm not exactly sure what you're asking, but if I'm close, then I bet you can do whatever you're talking about.

You probably need to check to make sure the images are actually getting set. It sounds just like a debugging problem. Log every image that's getting downloaded, make sure all are downloaded and that they're valid NSData (or whatever format) and they're getting set as images.

How can I add other param in this method to get the imageUrl too?

Change your selector to:

@selector(setupImage:withURL:)

then this should work:

[callbackTarget performSelector:callbackSelector withObject:thisImage withObject:imageURL]