My UITableView scrolls really slowly when I load from a local JSON. The images are being loaded from a external URL. I first try loading the JSON in my viewWillAppear method:
dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT,0), ^{
NSString *filePath = [[NSBundle mainBundle] pathForResource:#"HomePage" ofType:#"json"];
NSError *error = nil;
NSData *data = [NSData dataWithContentsOfFile:filePath];
self.titleLabels = [NSJSONSerialization JSONObjectWithData:data options:kNilOptions error:&error];
});
And in my tableView (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath, I have the following:
HomeTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:#"Cell"];
if(cell == nil) {
[tableView registerNib:[UINib nibWithNibName:#"HomeCell" bundle:nil] forCellReuseIdentifier:#"Cell"];
cell = [tableView dequeueReusableCellWithIdentifier:#"Cell"];
}
NSDictionary *titleLabels = [self.titleLabels objectAtIndex:indexPath.row];
NSString *label = [titleLabels objectForKey:#"Heading"];
NSURL *imageURL = [NSURL URLWithString:[titleLabels objectForKey:#"Image"]];
UIImage *image = [UIImage imageWithData:[NSData dataWithContentsOfURL:imageURL]];
cell.label.text = label;
cell.imageView.image = image;
cell.cardView.frame = CGRectMake(10, 5, 300, 395);
return cell;
I am just wondering why the table view is scrolling very slowly. If anyone could shed some light on this, it would be greatly appreciated.
Thanks!
UIImage *image = [UIImage imageWithData:[NSData dataWithContentsOfURL:imageURL]]
This is what is causing the slow scrolling in your app. You are making a network call for the cell.imageView.image property. Since you are calling the [UIImage imageWithData:[NSData dataWithContentsOfURL:imageURL]]; ON THE MAIN THREAD, the app needs to wait for the network call to finish, only then it can scroll farther.
The keypoint here is, you are doing all the networking calls on the main thread, and all touches will be delayed untill all the cells have been completely loaded.
This is not recommended, at all.
A better approach :
(1). is to make the networking call, only for the VISIBLE CELLS on the screen.
Follow this tutorial -- > How to Make Faster UITableViewCell Scrolling by RayWenderLich
(2) Apple's Sample Code, which shows this in action
(3) Load all the images beforehand and store it in an array, after viewDidLoad
Related
I'm trying to create a feed just like the one in facebook. The problem is, the image on the succeeding rows will load the images from the initial rows and then correctly load their corresponding load. When you go to the top rows, the images previously loaded are gone. I've tried lazy loading but the problem persists. You could view the video to understand the problem better. (https://www.youtube.com/watch?v=NbgYM-1xYN4)
The images are asynchronously loaded and are fetched from our server.
Here are some Code:
#pragma mark - Table view data source
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
return 1;
}
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
return [latestPosts count];
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
NSDictionary * dataDict = [latestPosts objectAtIndex:indexPath.row];
CardCell *cell = [self.feedTable dequeueReusableCellWithIdentifier:#"CardCell"];
if (cell == nil) {
cell = [[CardCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:#"CardCell"];
}
[cell layoutSubviews];
NSURL *imageURL = [[NSURL alloc] initWithString:[dataDict objectForKey:#"post_holder_image"]];
NSURL *postImageURL = [[NSURL alloc] initWithString:[dataDict objectForKey:#"post_image"]];
dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_BACKGROUND, 0), ^{
NSData *imageData = [NSData dataWithContentsOfURL:imageURL];
NSData *postImageData = [NSData dataWithContentsOfURL:postImageURL];
dispatch_async(dispatch_get_main_queue(), ^{
cell.brandImage.image = [UIImage imageWithData:imageData];
cell.postImage.image = [UIImage imageWithData:postImageData];
});
});
cell.brandName.text = [dataDict objectForKey:#"post_holder"];
cell.postDateTime.text = [dataDict objectForKey:#"post_datetime"];
cell.postMessage.text = [dataDict objectForKey:#"post_content"];
return cell;
}
Use below method of UITableViewCell in your custom cell and set the image property to nil.
hope it will work for you.
-(void)prepareForReuse{
[super prepareForReuse];
// Then Reset here back to default values that you want.
}
There are a few problems with the above.
As mentioned above you need to use a image as a placeholder (i.e blank white or an image of your choice) in the cell init code AND cell reuse.
You really need to cache your images, only download an image once and then store it in a dictionary. i.e.:
UIImage *cachedImage = self.images[user[#"username"]];
if (cachedImage) {
//use cached image
[button setBackgroundImage:cachedImage forState:UIControlStateNormal];
}
else {
//download image and then add it to the dictionary }
where self.images is an NSMutableDictionary. You could also look into NSCache. If you don't cache the images you will find the table is very laggy when scrolling for a large number of rows because of the image conversion from data.
However this will not completely fix the problem if you start loading a table and scroll up and down very fast the images will appear to be in the wrong places and move around until they are all loaded. Cell reuse will confuse where to put the image. Make sure you put [tableView reloadItemsAtIndexPaths:#[indexPath]]; in your download block i.e.:
NSURL *imageURL = [[NSURL alloc] initWithString:[dataDict objectForKey:#"post_holder_image"]];
NSURL *postImageURL = [[NSURL alloc] initWithString:[dataDict objectForKey:#"post_image"]];
dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_BACKGROUND, 0), ^{
NSData *imageData = [NSData dataWithContentsOfURL:imageURL];
NSData *postImageData = [NSData dataWithContentsOfURL:postImageURL];
dispatch_async(dispatch_get_main_queue(), ^{
cell.brandImage.image = [UIImage imageWithData:imageData];
cell.postImage.image = [UIImage imageWithData:postImageData];
[tableView reloadItemsAtIndexPaths:#[indexPath]];
});
});
You need to set imageview.image nil or you should set your placeholder image while reusing cells. Here is same question Async image loading from url inside a UITableView cell - image changes to wrong image while scrolling
Other than that if you are not using parse.com api ect. you can check https://github.com/rs/SDWebImage or https://github.com/AFNetworking/AFNetworking
There are tons of answer about this topic.
[cell layoutSubviews];
cell.brandImage.image = nil;
cell.postImage.image = nil;
I'm parsing images from JSON data and displaying in Table View. My code to display images in table view is -
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *cellidentifier=#"MyCell";
OnlineCell *cell = [tableView dequeueReusableCellWithIdentifier:cellidentifier];
if (cell == nil)
{
cell = [[OnlineCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:cellidentifier];
}
cell.userLabel.text = [self.allusername objectAtIndex:indexPath.row];
dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{
imageURL = [self.alluserphoto objectAtIndex:indexPath.row];
img = [UIImage imageWithData:[NSData dataWithContentsOfURL: [NSURL URLWithString:imageURL]]];
dispatch_async(dispatch_get_main_queue(), ^{
cell.userIMage.image = img;
[indicator stopAnimating];
});
});
return cell;
}
Simulator Output -
Device OutPut -
Please tell me the how could i get images in device.
As i can see two screenshot one is Simulator and one is Device that two image common Load at both end simulator and device. So i think issue in to you image that comes from web side. Because you code is correct if there is issue in code then that not load two image as well in device.
Please test with change the image with First loaded image from your back End side and check once that have to load. put first loaded image for all response instead of goggles image that not load in device. i am dame sure issue is in image not in code.
Debugging Suggestion 1: On the device, make sure that the image is accessible. You can try opening the image in Safari. If safari is opening the image, it means that image is accessible.
Debugging Suggestion 2: If the image is accessible, try loading the image synchronously and debug if you're getting the required data (on the device):
NSURL *url = [NSURL URLWithString:self.photoImagePath]; // Is URL valid?
NSData *imageData = [NSData dataWithContentsOfURL:url]; // Is data nil?
UIImage *image = [UIImage imageWithData:imageData]; // Is image nil?
Then, try loading the image asynchronously, like this:
__weak UIImageView *weakImgageView = cell.userIMage;
imageURL = [self.alluserphoto objectAtIndex:indexPath.row];
dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{
UIImage *image = [UIImage imageWithData:[NSData dataWithContentsOfURL: [NSURL URLWithString:imageURL]]];
dispatch_async(dispatch_get_main_queue(), ^{
weakImgageView.image = image;
[indicator stopAnimating];
});
});
Hope this helps.
The default image is not coming properly. This is what I suspect. Please check if you are giving the name properly or not. This could be the issue.
Set default image until you fetch image asynchronously from JSON.
UIImage *img = [UIImage imageNamed:#"default.png"];
When you fetch image in asynchronously method means it will fetch depend on image size & internet speed. So you just keep a default image until it fetch completely from server
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *CellIdentifier = #"MyCell";
OnlineCell *cell = (OnlineCell *)[tableView dequeueReusableCellWithIdentifier:CellIdentifier];
NSArray *nib = nil;
if (cell == nil)
{
nib = [[NSBundle mainBundle] loadNibNamed:#"YourCustomCellNibName" owner:self options:nil];
cell = [nib objectAtIndex:0];
}
// Your code
cell.userLabel.text = [self.allusername objectAtIndex:indexPath.row];
dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{
//NSData *imagedata = [NSData dataWithContentsOfURL:[NSURL URLWithString:[self.alluserphoto objectAtIndex:indexPath.row]]];
NSURL* url = [NSURL URLWithString:[self.alluserphoto objectAtIndex:indexPath.row]];
NSURLRequest* request = [NSURLRequest requestWithURL:url];
[NSURLConnection sendAsynchronousRequest:request
queue:[NSOperationQueue mainQueue]
completionHandler:^(NSURLResponse * response,
NSData * data,
NSError * error) {
if (!error){
UIImage* image = [[UIImage alloc] initWithData:data];
// do whatever you want with image
if (image) {
dispatch_async(dispatch_get_main_queue(), ^{
OnlineCell *updateCell = (id)[tableView cellForRowAtIndexPath:indexPath];
if (updateCell)
cell.userIMage.image = image;
});
}
}
}];
});
}
So I have an application that reads records from a database and basically fills out a UITableView with the information from the DB. Some of the information includes an image, which it brings from an online server I have. Everything works fine, but the program is a little slow and scrolling is a little laggy/ jumpy, as its bringing all the images at once, instead of bringing them as I scroll. Is there a way to change it so that as I scroll it brings the next few visible records?
-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath*)indexPath {
static NSString *CellIdentifier = #"VersionCell";
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier forIndexPath:indexPath];
if (cell == nil) {
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle
reuseIdentifier:CellIdentifier];
}
STSneakerInfo *info = [_versionInfo objectAtIndex:indexPath.row];
cell.textLabel.font = [UIFont boldSystemFontOfSize:14.1];
[[cell textLabel] setNumberOfLines:2];
cell.textLabel.text = [[_uniqueBrand stringByAppendingString:#" "] stringByAppendingString: info.version];
cell.detailTextLabel.textColor = [UIColor grayColor];
cell.detailTextLabel.font = [UIFont boldSystemFontOfSize:14.1];
cell.detailTextLabel.text = info.initialReleaseDate;
NSString *brandVersion = [[_uniqueBrand stringByAppendingString:#" "] stringByAppendingString:info.version];
NSString *underscoredBrandVersion = [brandVersion stringByReplacingOccurrencesOfString:#" " withString:#"_"];
NSString *underscoredBrandName = [_uniqueBrand stringByReplacingOccurrencesOfString:#" " withString:#"_"];
NSData *imageData = [[NSData alloc] initWithContentsOfURL: [NSURL URLWithString: ([[[[[#"http://www.abc/img/" stringByAppendingString:underscoredBrandName] stringByAppendingString:#"/"] stringByAppendingString:underscoredBrandVersion] stringByAppendingString:#"/"] stringByAppendingString:#"default.jpg"])]];
cell.imageView.image = [UIImage imageWithData: imageData];
return cell;
}
you can use (https://github.com/rs/SDWebImage) to download image async. its easy and fast.
i prefered this library because it will handle your cache.
just write below code
[cell.imageView sd_setImageWithURL: [NSURL URLWithString: ([[[[[#"http://www.abc/img/" stringByAppendingString:underscoredBrandName] stringByAppendingString:#"/"] stringByAppendingString:underscoredBrandVersion] stringByAppendingString:#"/"] stringByAppendingString:#"default.jpg"])]];
you can also download image in background thread as per wenchenHuang answer above. using below code.
dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{
NSData *data = [NSData dataWithContentsOfURL:[NSURL URLWithString: ([[[[[#"http://www.abc/img/" stringByAppendingString:underscoredBrandName] stringByAppendingString:#"/"] stringByAppendingString:underscoredBrandVersion] stringByAppendingString:#"/"] stringByAppendingString:#"default.jpg"])];
if (data)
{
UIImage *img = [UIImage imageWithData:data];
dispatch_async(dispatch_get_main_queue(), ^{
if (img)
cell.imageView.image = img;
});
}
});
Maybe this will help you.
The UITableView class never loads cells until they're about to appear onscreen.
I suggest you to use GCD to download image background.When finished,notice UI to change.
dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{
//Download images
dispatch_async(dispatch_get_main_queue(), ^{
//Notice UI to change
});
});
Here's a full, real-world example with DLImageLoader
https://github.com/AndreyLunevich/DLImageLoader-iOS/tree/master/DLImageLoader
DLImageLoader is incredibly well-written, maintained constantly, is super-lightweight, and it can properly handle skimming.
It's difficult to beat and is used in many apps with vast numbers of users.
It is really an amazingly well maintained library - and on top of that the new Swift version is the pinnacle of excellence in Swift programming, it's a model for how to do it.
PFObject *aFacebookUser = [self.fbFriends objectAtIndex:thisRow];
NSString *facebookImageURL = [NSString stringWithFormat:
#"http://graph.facebook.com/%#/picture?type=large",
[aFacebookUser objectForKey:#"id"] ];
__weak UIImageView *loadMe = self.cellImage;
[DLImageLoader loadImageFromURL:facebookImageURL
completed:^(NSError *error, NSData *imgData)
{
if ( loadMe == nil ) return;
if (error == nil)
{
UIImage *image = [UIImage imageWithData:imgData];
image = [image ourImageScaler];
loadMe.image = image;
}
else
{
// an error when loading the image from the net
}
}];
another real world example,
-(UICollectionViewCell *)collectionView:(UICollectionView *)cv
cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
NSInteger thisRow = indexPath.row;
BooksCell *cell;
cell = [cv dequeueReusableCellWithReuseIdentifier:
#"CellBooksNormal" forIndexPath:indexPath];
cell.layer.shouldRasterize = YES;
cell.layer.rasterizationScale = [UIScreen mainScreen].scale;
// set text items...
cell.title = #"blah;
// set image items using DLImageLoader...
__weak UIBookView *loadMe = cell.anImage;
[DLImageLoader loadImageFromURL:imUrl
completed:^(NSError *error, NSData *imgData)
{
[loadMe use:[UIImage imageWithData:imgData]];
}];
return cell;
}
Reason for your sluggish scroll is that you are downloading image on the main thread.
NSData *imageData = [[NSData alloc] initWithContentsOfURL:
That piece of code which is running on main thread, will make a network call and start downloading contents from server. And the execution halts there until its completed. Which means you wont be be able to scroll down anymore till image is loaded.
There are many workarounds for this. However the logic is same for all. Download image in a separate thread and load it once its completed.
If you are using AFNetworking in your project you can use setImageWithURL: on your UIImageView object. You need to include UIImageView+AFNetworking.h. It has a inbuilt caching mechanism and it will cache the images downloaded for that session.
I am building an iOS app that adds XML items to a TableView (among other things, of course). I would like to display the article's thumbnail in the TableView cell or a default placeholder if the article's thumbnail field is empty.
The code below adds the thumbnail from the article but then causes scrolling to stutter quite a bit. If I only use the placeholder image for each cell, everything is fine. I am guessing I am probably not using the most ideal method to add the thumbnail image, not sure if this is causing the problem.
-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:#"idCellNewsTitle"];
if (cell == nil) {
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:#"idCellNewsTitle"];
}
NSDictionary *dict = [self.arrNewsData objectAtIndex:indexPath.row];
cell.imageView.image = [UIImage imageNamed:#"holder-small.jpg"];
cell.textLabel.text = [dict objectForKey:#"title"];
cell.detailTextLabel.text = [dict objectForKey:#"pubDate"];
if ([dict objectForKey:#"thumbnail"] != nil) {
NSData *imgData = [NSData dataWithContentsOfURL:[NSURL URLWithString: [dict objectForKey:#"thumbnail"]]];
if (imgData) {
UIImage *image = [UIImage imageWithData:imgData];
if (image) {
cell.imageView.image = image;
}
}
}
return cell;
}
Coding in the latest XCode, testing in simulator and on a newer iPod - results are the same with both. No warnings or errors during the running of the app, CPU spikes at 1% when scrolling and memory stays around 16 MB.
UPDATE - Video
Here is a video demonstrating this issue for any future noobs to compare with -
First example is with a placeholder, second is without.
Video on YouTube
replace your code in cellForRowAtIndexPath:
after this line if ([dict objectForKey:#"thumbnail"] != nil)
That way you load each image in the background and as soon as its loaded the corresponding cell is updated on the mainThread.
dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_BACKGROUND, 0), ^(void) {
NSData *imgData = NSData *imgData = [NSData dataWithContentsOfURL:[NSURL URLWithString: [dict objectForKey:#"thumbnail"]]];
if (imgData) {
UIImage *image = [UIImage imageWithData:imgData];
dispatch_sync(dispatch_get_main_queue(), ^(void) {
UIImage *image = [UIImage imageWithData:imgData];
if (image) {
cell.imageView.image = image;
}
});
});
LazyTableImages Reference
Fetch images using GCD
// Fetch using GCD
dispatch_queue_t downloadThumbnailQueue = dispatch_queue_create("Get Photo Thumbnail", NULL);
dispatch_async(downloadThumbnailQueue, ^{
UIImage *image = [self getTopPlacePhotoThumbnail:photo];
dispatch_async(dispatch_get_main_queue(), ^{
UITableViewCell *cellToUpdate = [self.tableView cellForRowAtIndexPath:indexPath]; // create a copy of the cell to avoid keeping a strong pointer to "cell" since that one may have been reused by the time the block is ready to update it.
if (cellToUpdate != nil) {
[cellToUpdate.imageView setImage:image];
[cellToUpdate setNeedsLayout];
}
});
});
I have a UITableview that has a list of images like so. But it is very laggy for some reason when I scroll up and down. Any way to stop this? The images dont need to be reloaded. It needs to stay static.
- (UITableViewCell *)tableView:(UITableView *)tableView
cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *MyIdentifier = #"MyIdentifier";
UITableViewCell *cell = [self.tableView dequeueReusableCellWithIdentifier:MyIdentifier];
if (cell == nil)
{
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault
reuseIdentifier:MyIdentifier];
}
ContentModel *contentModel = [self.tableArray objectAtIndex:indexPath.row];
NSURL *url = [NSURL URLWithString:contentModel.txtImages];
NSData *data = [NSData dataWithContentsOfURL:url];
cell.imageView.image = [[UIImage alloc] initWithData:data];
return cell;
}
You may better use AFNetworking UIImageView Methods:
[imageView setImageWithURL:[NSURL URLWithString:#"http://image.com/image.png"]];
Even with a PlaceHolder:
[self.image setImageWithURL:[NSURL URLWithString:#"http://image.com/image.png"] placeholderImage: [UIImage imageNamed:#"logo"]];
https://github.com/AFNetworking/AFNetworking
This will dramatically reduce the lag on your tableview.
We have very similar requirements but my code works perfectly, I am guessing that
these commands slow down your routine:
NSURL *url = [NSURL URLWithString:contentModel.txtImages];
NSData *data = [NSData dataWithContentsOfURL:url];
cell.imageView.image = [[UIImage alloc] initWithData:data];
instead I use the following:
NSString *icon = CurrentQRCode.parsed_icon;
NSString *filePath = [[NSBundle mainBundle] pathForResource:icon ofType:#"png"];
UIImage *image_file = [UIImage imageWithContentsOfFile:filePath];
cell.imageView.image = image_file;
the whole routine is below:
QRTypeCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
if (cell == nil) {
cell = [[QRTypeCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];}
CurrentQRCode = (QRCode *)[fetchedResultsController objectAtIndexPath:indexPath];
NSString *icon = CurrentQRCode.parsed_icon;
NSString *string = CurrentQRCode.parsed_string;
cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator;
NSString *filePath = [[NSBundle mainBundle] pathForResource:icon ofType:#"png"];
UIImage *image_file = [UIImage imageWithContentsOfFile:filePath];
cell.imageView.image = image_file;
cell.labelview.text = string;
I believe I originally tried handling UIImages using initWithData but found them a lot slower than the other methods.
Never ever ever ever load data from a network on the main thread. Use GCD or a framework like AFNetworking or restkit. The worst thing you could ever do to you app is lock up your main thread with things that can be computed off the main thread. A good rule of thumb is to ask is this something that is updating the UI, if not think about moving it to another thread.
I would also look at some of the WWDC videos about multithreading and anything related to moving off the main thread if you really want to understand the reasons why.
AFNetworking
RestKit
GCD