Download content for cells only for visible - ios

I have UICollectionViewCell with dynamic content download (image download). I have download in block in cell:
-(MainVCCell*)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
static NSString *cellIdentifier = #"MainVCCell";
MainVCCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:cellIdentifier forIndexPath:indexPath];
Person *person = [self.fetchedResult objectAtIndex:indexPath.row];
[cell.login setText:person.login];
if(person.avatar) {
[cell.avatarImageView setImage:[UIImage imageWithData:person.avatar]];
} else {
[cell.avatarImageView setImage:[UIImage imageNamed:#"placeholder"]];
[AsyncUrl request:[NSString stringWithFormat:#"some SSL URL",person.login] completeBlock:^(NSData *data) {
dispatch_queue_t downloadQueue = dispatch_queue_create("Download queue", NULL);
dispatch_async(downloadQueue, ^{
dispatch_async(dispatch_get_main_queue(), ^{
MainVCCell *cellToUpdate = (MainVCCell*)[collectionView cellForItemAtIndexPath:indexPath];
if(cellToUpdate) {
[cellToUpdate.avatarImageView setImage:[UIImage imageWithData:data]];
}
person.avatar = data;
[[CoreDataController sharedInstance] saveContext];
});
});
} errorBlock:^(NSError *error) {
NSLog(#"%#",error);
}];
}
return cell;
}
And it work fine, but of course when i scroll several times, i get so many connections and download fire that some of them even timeout. I understand why is this happening. Is there a way to cancel connections in invisible cell blocks? I want to download only a visible content.
I'm familiar with SDWebImage but this library is not support SSL connections, so i can't use it.

Collection views have a delegate method that is called when the cell disappears
- (void)collectionView:(UICollectionView *)collectionView didEndDisplayingCell:(UICollectionViewCell *)cell forItemAtIndexPath:(NSIndexPath *)indexPath
Just make sure you have a method for stop the connection, then call that method.
UICollectionViewDelegate Protocol

I strong recommend you to use AFNetworking.
Then you create an array of NSOperation in your viewDidLoad:
self.operationQueue = [[NSMultableArray alloc]init];
In your -(MainVCCell*)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath, make something similar to this:
AFHTTPRequestOperation *operation [[AFHTTPRequestOperation alloc] initWithRequest:posterURLRequest];
operation.responseSerializer = [AFImageResponseSerializer serializer];
[operation setCompletionBlockWithSuccess:^(AFHTTPRequestOperation *operation, id responseObject) {
success:^(NSURLRequest *request, NSHTTPURLResponse *response, UIImage *image)
{
if(cellToUpdate) {
[cellToUpdate.avatarImageView setImage:[UIImage imageWithData:data]];
}
person.avatar = data;
[[CoreDataController sharedInstance] saveContext];
}
failure:^(NSURLRequest *request, NSHTTPURLResponse *response, NSError *error)
{
// manage errors
}];
[self.operationQueue addObject:operation];
[operation start];
Them At - (void)collectionView:(UICollectionView *)collectionView didEndDisplayingCell:(UICollectionViewCell *)cell forItemAtIndexPath:(NSIndexPath *)indexPath
[self.operationQueue[indexPath.row] cancel];

use NSURLConnection to start a download.
Create a subClass of NSObject which has one NSUrlConnection instance property , for this subclass you provide a link and it will download the image using NSUrlConnection.
Create instances of this class when ever you want to download an image and push it into an array ( say ConnectionsArray).
When you think, you dont want to download particular indexPaths images, just cancel those by using ConnectionsArray.
Get that particular download-instance using indexPath and ConnectionsArray,and call cancel method of NSURLConnection of that object.
NSURLConnection has cancel method, which cancels the ongoing operation.

Related

How to download 100 images from server in Objective-C using NSURLSession

I am making an app..
I need to download many pictures from a server, but I don't know how to do
previously am doing this by following some articles
currently am facing some issues
when scrolling images flicker and change all the time. When scrolling back up fast, all images are wrong. What can I do about that?
- (void)downloadImageWithURL:(NSURL *)url completionBlock:(void (^)(BOOL succeeded, UIImage *image))completionBlock
{
NSMutableURLRequest *request = [NSMutableURLRequest requestWithURL:url];
[NSURLConnection sendAsynchronousRequest:request
queue:[NSOperationQueue mainQueue]
completionHandler:^(NSURLResponse *response, NSData *data, NSError *error) {
if ( !error )
{
UIImage *image = [[UIImage alloc] initWithData:data];
completionBlock(YES,image);
} else{
completionBlock(NO,nil);
}
}];
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *cellIdentifier = #"venue";
UITableViewCell *cell = [self.tableView dequeueReusableCellWithIdentifier:cellIdentifier forIndexPath:indexPath];
if (!cell) {
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:cellIdentifier];
}
Venue *venue = ((Venue * )self.venues[indexPath.row]);
if (venue.userImage) {
cell.imageView.image = venue.image;
} else {
// set default user image while image is being downloaded
cell.imageView.image = [UIImage imageNamed:#"default.png"];
// download the image asynchronously
[self downloadImageWithURL:venue.url completionBlock:^(BOOL succeeded, UIImage *image) {
if (succeeded) {
// change the image in the cell
cell.imageView.image = image;
// cache the image for use later (when scrolling up)
venue.image = image;
}
}];
}
}
**Any best way suggestions **
I see a few issues in your code so let me first give an example of minimum you need:
- (void)downloadImageFrom:(NSURL *)path completion:(void (^)(UIImage *image))completionBlock {
dispatch_queue_t queue = dispatch_queue_create("Image Download", 0);
dispatch_async(queue, ^{
NSData *data = [[NSData alloc] initWithContentsOfURL:path];
dispatch_async(dispatch_get_main_queue(), ^{
if(data) {
completionBlock([[UIImage alloc] initWithData:data]);
} else {
completionBlock(nil);
}
});
});
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
MyTableViewCell *cell = ...; // Create my own cell
NSString *imageURL = ...; // Get from my model
cell.imageURLString = imageURL;
[self downloadImageFrom:[NSURL URLWithString:imageURL] completion:^(UIImage *image) {
if(cell.imageURLString == imageURL) {
cell.imageView.image = image;
}
}];
return cell;
}
First of all when downloading (no matter what you use) ensure you are on correct thread. I used the easiest tool to download remote image which is using NSData and will work great as long your request don't need extra data like credentials. There is no reason for you to change it but ensure you call completion on your main thread.
Next what you are experiencing is the issue with multithreading plus cell dequeuing. In table view a same cell will be reused. When you scroll down a cell that travels up off your screen will appear at the bottom. This is to gain performance.
Now because you scroll up and down and your images load asynchronously the completion block if (succeeded) { may be called for what it seems to be an incorrect cell. What you need to do is check if the call is still valid.
So you should subclass your cell and add at least some identifier like imageURLString. You set that before you make the call to get the image and then check again on completion if the cell identifier is still the same. If it is not then your cell has been reused and the image downloaded is to be thrown away.
That also implies that you should create some sort of image caching. That way a thrown-away image is not really thrown away but is cached and if the same cell should appear the download will not occur again.

Download Images from a server to display on the CollectionView

I am working on a product application where user could sell/buy. This application is based on collection view. Collection view has collection cell where it displays product image thumbnail.
The following code gets products images from the server and it waits to download all images and then display them in the cells. The following code works but user is waiting 10-20 seconds to see all products. Is there a better way to handle ?
- (void)viewDidLoad {
[super viewDidLoad];
dispatch_queue_t queue = dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_HIGH, 0ul);
dispatch_async(queue, ^(void) {
[self loadFromURL];
dispatch_async(dispatch_get_main_queue(), ^{
});
});
}
-(void)loadFromURL {
NSURL *url = [NSURL URLWithString:#"http://myURL/productAll.php"];
NSURLRequest *request = [NSURLRequest requestWithURL:url];
AFHTTPRequestOperation *operation = [[AFHTTPRequestOperation alloc] initWithRequest:request];
operation.responseSerializer = [AFJSONResponseSerializer serializer];
[operation setCompletionBlockWithSuccess:^(AFHTTPRequestOperation *operation, id responseObject)
{
pElements= (NSMutableArray *)responseObject;
[collectionView reloadData];
}
failure:^(AFHTTPRequestOperation *operation, NSError *error)
{
UIAlertView *alertView = [[UIAlertView alloc] initWithTitle:#"Error Retrieving Product" message:[error localizedDescription]delegate:nil cancelButtonTitle:#"Ok" otherButtonTitles:nil];
[alertView show];
}];
[operation start];
}
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
return pElements.count;
}
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
ProductCell *cell=[collectionView dequeueReusableCellWithReuseIdentifier:#"cellIdentifier" forIndexPath:indexPath];
cell.backgroundColor=[UIColor whiteColor];
NSString *arrayResult = [[pElements objectAtIndex:indexPath.row] objectForKey:#"image"];
NSData *data = [[NSData alloc] initWithBase64EncodedString:arrayResult options:NSDataBase64DecodingIgnoreUnknownCharacters];
cell.productImage.image = [[UIImage alloc] initWithData:data];
cell.productImage.layer.cornerRadius = 10;
cell.productImage.clipsToBounds = YES;
return cell;
}
You have a response from the server in which the image data for all of the images is base-64 encoded in the response. This means that the response is likely very large and won't be shown to the user until everything is downloaded.
Instead, you might consider refactoring your server code to not include the image data in base-64 format, but rather to just include a URL (or some identifier) that can be used to retrieve the image later. Your response should be much smaller and should be able to be processed much more quickly.
Then, when cellForItemAtIndexPath is called, rather than extracting the image data out of the original response, you lazily (and asynchronously) request the image for the cell. AFNetworking provides a nice UIImageView category in UIImageView+AFNetworking that asynchronously retrieves images from network source. (And using this category gets you out of the weeds of lots of subtle issues when doing asynchronous image retrieval.)
By the way, if your images are of varying sizes, you might want to include the dimensions of the image in the original request so that the cells and their image views can be appropriately sized up front, rather than resizing them as the images are retrieved.
--
A couple of observations:
You don't need to dispatch [self loadFromURL] to a background queue, as that's already asynchronous. And I'd probably use GET of the request
You can't just cast responseObject to NSMutableArray, because it probably is not mutable. You really should use NSArray or use mutableCopy if you really need it to be mutable.
You're doing some cell configuration in cellForItemAtIndexPath. Most of that (clipping, background color, etc.) can be done right in IB, so I would do it there rather than doing it programmatically. The only thing you might need to do programmatically is the rounding of the corners (and, even that, I'd probably do with a IBDesignable subclass, though that's beyond the scope of this question).
Thus, assuming (a) your array has a new property called imageURL which is the URL of the image; and (b) the cell has a fixed sized image view, you could do something like:
#interface ViewController ()
#property (nonatomic, strong) AFHTTPRequestOperationManager *manager;
#property (nonatomic, strong) NSArray *pElements;
#end
#implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
self.manager = [AFHTTPRequestOperationManager manager];
[self loadFromURL];
}
-(void)loadFromURL {
NSString *urlString = #"http://myURL/productAll.php";
[self.manager GET:urlString parameters:nil success:^(AFHTTPRequestOperation * _Nonnull operation, id _Nonnull responseObject) {
self.pElements = responseObject;
[self.collectionView reloadData];
} failure:^(AFHTTPRequestOperation * _Nullable operation, NSError * _Nonnull error) {
UIAlertView *alertView = [[UIAlertView alloc] initWithTitle:#"Error Retrieving Product" message:[error localizedDescription]delegate:nil cancelButtonTitle:#"Ok" otherButtonTitles:nil];
[alertView show];
}];
}
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
return self.pElements.count;
}
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
ProductCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:#"cellIdentifier" forIndexPath:indexPath];
NSString *imageURL = self.pElements[indexPath.row][#"imageURL"];
[cell.productImage setImageWithURL:[NSURL URLWithString:imageURL]];
cell.productImage.layer.cornerRadius = 10;
return cell;
}
#end

Set an image to many UIImageViews

Say I have 60-70 UIImageViews and I want to dynamically load the same image into all of them at the same time (so to speak).
For example, if I were working on a web page with 60-70 divs and I wanted to give them all a background image I would give them all a class of myDivs and call `$('.myDivs').css('background-image', 'url(' + imageUrl + ')');
I know how to set a UIImageView's image but is there an easy way to set a bunch at once in Objective C?
I did try searching but I was flooded with a ton of stuff that is really unrelated.
It depends on the way you wish to display the imageView(s).
If you are using a UITableView or a UICollectionView, in the cellForRowAtIndexPath: method you can dynamically update an imageView placed in a cell.
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:#"cell" forIndexPath:indexPath];
// Configure the cell...
[self setCell:cell forIndexPAth:indexPath];
return cell;
}
- (void)setCell:(UITableViewCell *)cell forIndexPAth:(NSIndexPath *)indexPath
{
__weak UITableViewCell *weakCell = cell;
// 5. add picture with AFNetworking
NSURLRequest *request = [[NSURLRequest alloc] initWithURL:[NSURL URLWithString:#"www.facebook.com/profileImageLocation"]];
[cell.profileImage setImageWithURLRequest:request
placeholderImage:nil
success:^(NSURLRequest *request, NSHTTPURLResponse *response, UIImage *image) {
weakCell.profileImage
.image = image;
} failure:^(NSURLRequest *request, NSHTTPURLResponse *response, NSError *error) {
NSLog(#"bad url? %#", [[request URL] absoluteString]);
}];
}
Another option will be using a for loop like this:
- (void)addImagesToAllMyImageViews:(NSArray *)images
{
for (id obj in images) {
if ([obj isKindOfClass:[UIImageView class]]) {
UIImageView *imageView = (UIImageView *)obj;
imageView.image = [UIImage imageNamed:#"someImage.png"];
}
}
}
I think you can do with tag property, select all ImageView and give them a teg like 777 and
for(id* subview in self.view.subview) {
if([subview isKindaOfclass:[UIImageView class]] && (subview.tag == 777)) {
UIImageView* imageView = (UIImageView*)subview;
imageVIew.image = youImage;
}
}
hope this helps you

Using AFNetwork to load a collectionView from Instagram, but seems to blow right by my code, leaving me with no images

I can retrieve what I need using the Instagram API, but (what I understand) is since AFNetworking operates asynchronous, the code jumps right into my CollectionView methods but yet my AFNetworking call is still at work, the CollectionView cells never load. There is no array ready. Used [operation waitUntilFinished]; but does not seem to do anything.
Code here, thanks!
-(void)viewDidLoad {
[super viewDidLoad];
NSString *path = #"https://api.instagram.com/v1/tags/snow/media/recent?access_token=836379.f59def8.fd07b9ba8ea440188dc56d2763bbf6c2";
NSURLRequest *request = [NSURLRequest requestWithURL:[NSURL URLWithString:path]];
AFJSONRequestOperation *operation =
[AFJSONRequestOperation JSONRequestOperationWithRequest:request
success:^(NSURLRequest *request, NSHTTPURLResponse *response, id JSON) {
imageArray = [[[[JSON valueForKey:#"data"]valueForKey:#"images"]valueForKey:#"low_resolution"]valueForKey:#"url"];
for (id item in imageArray) {
[images addObject:item];
}
} failure:^(NSURLRequest *request, NSHTTPURLResponse *response, NSError *error, id JSON){
// NSLog(#"There was a problem: %#", [error localizedDescription]);
}];
[operation start];
[operation waitUntilFinished]; // DOES NOT STOP AND WAIT
}
- (NSInteger)numberOfSectionsInCollectionView: (UICollectionView *)collectionView {
return 1;
}
- (NSInteger)collectionView:(UICollectionView *)view numberOfItemsInSection:(NSInteger)section {
/* RETURNS ARRAY COUNT OF ZER0 HERE, BUT I AM EXPECTING A VALID ARRAY OF URLS!
return [imageArray count];
}
- (CollectionViewCell *)collectionView:(UICollectionView *)cv cellForItemAtIndexPath:(NSIndexPath *)indexPath {
CollectionViewCell *cell = [cv dequeueReusableCellWithReuseIdentifier:#"CellZero" forIndexPath:indexPath];
return cell;
}
-(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath {
}
The answer is simple. In your success callback block, just call
[self.collectionView reloadData];
This ensures that the collection view reload after the AFNetworking library successfully fetches the data from Instagram API. Actually, what I would do is to refactor the callback function in another method called "reloadCollectionViewWithImages:(NSArray *)imageArray":
- (void)reloadCollectionViewWithImages:(NSArray *)imageArray {
for (id item in imageArray) {
[images addObject:item];
}
[self.collectionView reloadData];
}
and call this method inside the success callback.
Comment if you have any other question :)
Reload the collection view data in the success block of your network request, after adding all the images to the imageArray: UICollectionView reloadData
Also have a look at valueForKeypath, that can help you get rid of those nested valueForKey calls.
Adding [self.collectionView reloadData]; works great. thanks Both answers came in at the same time. But only could check one. Thanks to both!

Table view scroll lagging when using SDWebImage

I am loading some images from the internet in a table view inside cellForRowAtIndexPath. Here is my code:
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *MyIdentifier = #"ArticleCell";
ArticleCell *cell = [tableView dequeueReusableCellWithIdentifier:MyIdentifier];
Article *article = [parser items][indexPath.row];
cell.title.text = article.title;
cell.newsDescription.text = article.description;
[cell.image setImageWithURL:[NSURL URLWithString:article.image]];
return cell;
}
My problem is that even if I use SDWebImage, when I scroll down, my app still lags. Here is some screenshots from Instruments:
It looks like even though the download of the image is performed in a background thread, the work with the image data is done in the main thread, thus it blocks your application. You could try the asynchronous image downloader provided by SDWebImage.
[SDWebImageDownloader.sharedDownloader downloadImageWithURL:imageURL
options:0
progress:^(NSUInteger receivedSize, long long expectedSize)
{
// progression tracking code
}
completed:^(UIImage *image, NSData *data, NSError *error, BOOL finished)
{
if (image && finished)
{
// do something with image
}
}
];
In your method it should look like:
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *MyIdentifier = #"ArticleCell";
ArticleCell *cell = [tableView dequeueReusableCellWithIdentifier:MyIdentifier];
Article *article = [parser items][indexPath.row];
cell.title.text = article.title;
cell.tag = indexPath.row;
cell.newsDescription.text = article.description;
[SDWebImageDownloader.sharedDownloader downloadImageWithURL:imageURL
options:0
progress:nil
completed:^(UIImage *image, NSData *data, NSError *error, BOOL finished)
{
if (cell.tag == indexPath.row && image && finished)
{
dispatch_async(dispatch_get_main_queue(), ^(){
cell.image = image;
});
}
}];
return cell;
}
Download the image on a separate thread, like so:
NSURLRequest *request = [NSURLRequest requestWithURL:yourURL];
[NSURLConnection sendAsynchronousRequest:request queue:[NSOperationQueue mainQueue] completionHandler:^(NSURLResponse *response, NSData *data, NSError *error) {
if ( data )
{
UIImage *image = [[UIImage alloc] initWithData:data];
[cell.image setImage:image];
}
}];
This probably has less to do with network activity and more to do with your image sizes. Resizing images, especially for non-integer multipliers, is expensive. If your images are significantly larger than the view you are putting them into, you need to resize and cache them in a background thread, and reference the cached copy from your view.
To confirm if this is your issue, manually download all the images and reference the local copy. If I am correct, your UITableView will still lag the same way.
You have to load asynchronously from server so your tableView will scrolling smoothly.
Please check below answer you will be able to solve your problem.
https://stackoverflow.com/a/15331306/1713478
Check you images, check the types and size and more important: Is one or more image broken by its file format in any way? Filesize too big, irregular (to large) bounds?
Try to open and re-save suspiciously image files with an image editor, to be sure the internal file format is OK.

Resources