How to implement lazy loading of image without using below link:
https://github.com/rs/SDWebImage
Note: I don't want to use any third party tool. I want to do from my side.
If you don't want to use any library (some are MIT or public domain licensed, so I think the only reason not to use them is that you want to learn how to build it yourself).
Here is how to do it with a simple and effective way:
1 : Put a temporary placeholder image in your imageView.
2 : Get your image in background thread.
2-a : If you want the cache feature, search for a cached image.
2-b : If no cache feature or no cached image, get your image from its source.
2-c : If cache feature, save the image to cache.
3 : In main thread show your image in the imageView.
Pseudo Code : (I wrote it on the go, it is not meant to run and it may have errors, sorry for that).
-(void) lazilyLoadImageFromURL :(NSURL *)url{
imageView.image = [UIImage imageNamed:#"Placeholder.png];
if([self cachedImageAvailableForURL:url){
imageView.image= [self cachedImageForURL:url];
}
else{
NSOperationQueue *queue = [NSOperationQueue mainQueue];
NSURLRequest *urlRequest = [NSURLRequest requestWithURL:url];
[NSURLConnection sendAsynchronousRequest:urlRequest queue:queue completionHandler:^(NSURLResponse * resp, NSData *data, NSError *error)
{
dispatch_async(dispatch_get_main_queue(),^
{
if ( error == nil && data )
{
UIImage *urlImage = [[UIImage alloc] initWithData:data];
imageView.image = urlImage;
[self saveImageInCache:image forURL:url];
}
});
}];
}
}
-(BOOL) cachedImageAvailableForURL:(NSURL*):url{
// check if there is a saved cached image for this url
}
-(UIImage *) cachedImageForURL:(NSURL*):url{
// returns the cached image for that url
}
-(void) saveImageInCache:(UIImage*) image forURL:(NSURL*)url{
// saves the image in cache for the url
}
Of course, this is only ONE POSSIBLE WAY to do it. I tried to make it simple, but there are plenty better and more complicated ways to do it.
Try it:
NSURL *imageURL = [NSURL URLWithString:#"www...."];
dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_BACKGROUND, 0), ^{
NSData *imageData = [NSData dataWithContentsOfURL:imageURL];
dispatch_async(dispatch_get_main_queue(), ^{
// Update the UI
self.imgVWprofile.image=[UIImage imageWithData:imageData];
});
});
Related
so i have a tableView in my app, which basically run the names and images of some user's friends from Facebook.
The problem is that when i drag the tableView up and down, it's slow and not smooth like it should be, although i use block to upload images from Facebook- so it's asynchrony.
Now, after i implement a block for upload images from Facebook, it is run faster then it was before the block- but still not smooth enough.
is anybody know how to deal with it?
here is some of my code:
cellForRowAtIndexPath:
-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
UITableViewCell * cell = [tableView dequeueReusableCellWithIdentifier:#"friendCell"];
if (cell == nil) {
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault
reuseIdentifier:#"friendCell"];
[friendsTableView reloadData];
}
//set data for user's friends images
NSURL *url;
NSString *stringID;
stringID = [[NSString alloc]initWithFormat:#"https://graph.facebook.com/%#/picture?type=square",facebookFriendsID[indexPath.row] ];
url = [NSURL URLWithString:stringID];
//Calling block function to hendle user's friends images from facebook
[self downloadImageWithURL:url :stringID :cell completionBlock:^(BOOL succeeded, UIImage *image) {
if (succeeded) {
cell.imageView.image = image;
}
}];
//For friends name...
cell.textLabel.text = facebookFriendsName[indexPath.row];
cell.textLabel.font = [UIFont fontWithName:#"Noteworthy" size:17.0f];
[cell setSelectionStyle:UITableViewCellSelectionStyleNone];
cell.imageView.layer.masksToBounds = YES;
cell.imageView.layer.cornerRadius = 25.0;
return cell;
}
And the downloadImage block:
//For upload the images from Facebook asynchrony- using block.
- (void)downloadImageWithURL:(NSURL *)url : (NSString *)string : (UITableViewCell *)cell 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 imageWithData:[NSData dataWithContentsOfURL:url]];
completionBlock(YES,image);
} else{
completionBlock(NO,nil);
}
}];
}
Thanks! :)
Your code has 4 problems, all of which are contributing to the slowness:
Delete [friendsTableView reloadData]; - you should never reload the table from inside cellForRowAtIndexPath:.
You should not reference cell from inside your completion block:
[self downloadImageWithURL:url :stringID :cell completionBlock:^(BOOL succeeded, UIImage *image) {
if (succeeded) {
cell.imageView.image = image;
}
}];
By the time your image downloads, cell may have been reused and be displaying different content. This can cause the wrong avatar image to appear. Instead, use indexPath to get the current cell by calling UITableViewCell *currentCell = [tableView cellForRowAtIndexPath:indexPath]; and set the image on that.
You are creating a new network request every time a cell appears. If the user scrolls very fast, you will have lots of simultaneous network requests. You may want to start network requests in scrollViewDidScroll: instead, when the scroll view slows down.
You are not de-duplicating network requests. If a user scrolls up and down really fast, they will generate lots of network requests to the same URL. You need to cache already-downloaded images and use those if the network request has already been made.*
The SDWebImage library has already solved all of these problems; you may simply want to use it instead of reinventing the wheel. At the very least, it's worth reading their code: https://github.com/rs/SDWebImage
* - NSURLCache may be caching the images for you, depending on the server's cache-control headers. But even so, this cache is slow (it caches the NSData representation, not the UIImage representation), and NSURLConnection will not stop you from starting 4 identical requests simultaneously.
Also, pay attention, that you load your image data for second time from main thread in request completion block:
UIImage *image = [UIImage imageWithData:[NSData dataWithContentsOfURL:url]];
you need to use NSData *data parameter from completionHandler - ^(NSURLResponse *response, NSData *data, NSError *error)
UIImage *image = [UIImage imageWithData:data];
BUT, as Aaron Brager noted, you don't need reinventing the wheel instead of using ready solution, like SDWebImage. so, all it matter if only you going to clarify how it works
i have one NSMutableArray with some image url's. The images have sizes between 12KB to 6MB. I use AsycImageView class and implement but when large images are downloading application get crashed, I gave 6*1024*1024 (6MB) for maxsize in that class, increase time interval 60.0 sec to 180.o sec, but there is no use. I'm getting an error "Received memory warning" and when app crash automatically connection remove from device, but in simulator there is no crash.
Use GCD for lazy loading.
dispatch_queue_t queue = dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_HIGH, 0ul);
dispatch_async(queue, ^{
NSString *strURL = url here;
NSData *data = [NSData dataWithContentsOfURL:[NSURL URLWithString:strURL]];
UIImage *image = nil;
if(data)
image = [UIImage imageWithData:data];
dispatch_sync(dispatch_get_main_queue(), ^{
//now use image in image View or anywhere according to your requirement.
if(image)
yourImgView = image
});
});
you can do this using multiThreading. Here is a code
- (UIImageView *)getImageFromURL:(NSDictionary *)dict
{
#ifdef DEBUG
NSLog(#"dict:%#", dict);
#endif
UIImageView *_cellImage = nil;
_cellImage = ((UIImageView *)[dict objectForKey:#"image"]);
NSString *strURL = [dict objectForKey:#"imageurl"]);
NSData *data = [NSData dataWithContentsOfURL:[NSURL URLWithString:strURL]];
#ifdef DEBUG
NSLog(#"%i", data.length);
#endif
NSArray *paths = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES);
NSString *documentsDirectory = [paths objectAtIndex:0];
NSString *dataFilePath = [NSString stringWithFormat:#"%#.png", [documentsDirectory stringByAppendingPathComponent:[dict objectForKey:#"imageid"]]];
if (data) // i.e. file exist on the server
{
[data writeToFile:dataFilePath atomically:YES];
_cellImage.image = [UIImage imageWithContentsOfFile:dataFilePath];
}
else // otherwise show a default image.
{
_cellImage.image = [UIImage imageNamed:#"nouser.jpg"];
}
return _cellImage;
}
And call this method in cellForRowAtIndexPath like this:
NSDictionary *dict = [NSDictionary dictionaryWithObjectsAndKeys:imageURL, #"imageurl", self.imgPhoto, #"image", imageid, #"imageid", nil];
[NSThread detachNewThreadSelector:#selector(getImageFromURL:) toTarget:self withObject:dict];
The code will start getting images in multiple threads and will save image locally to document folder. Also the image will not download again if already exists with the same name. Hope this helps
You could download image asynchronously using GCD. Use the following code,
__block NSData *imageData;
dispatch_queue_t myQueue = dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_HIGH, NULL);
dispatch_async(myQueue, ^{
//load url image into NSData
imageData = [NSData dataWithContentsOfURL: your_image_URL];
if(imageData) {
dispatch_sync(dispatch_get_main_queue(), ^{
//convert data into image after completion
UIImage *img = [UIImage imageWithData:imageData];
//do what you want to do with your image
});
} else {
NSLog(#"image not found at %#", your_image_URL);
}
});
dispatch_release(myQueue);
For further info, see dispatch_queue_t
I would recommend a drop in replacement API SDWebImage it provides a category for UIImageVIew with support for remote images coming from the web. you can also have a placeholder image till the images are downloaded Asynchronously
. Its easy to use and saves a lot of work
You're problem seems to be more of a memory usage issue than it is a performance issue.
If you really want to download image asynchronously I would recommend you use The UIImageView category from AFNetworking which has been fully tested and is very well maintained.
However here you run into memory warnings on your device (which obviously holds much less memory than your simulator which runs on your Mac).
So I would use first the static analyzer:
to see if leaks are present and then run a Leaks Instrument to track it down.
Hope this helps.
I have a UITableView which displays fetched RSS dynamically, I have now customized the RSS to return the image name so that i can later on add a UIImageView to to every cell in the table which displays the image beside every cell, here is the code for adding the image
UIImageView *imageView = [[UIImageView alloc] init];
imageView.frame = CGRectMake(0, 0, 40, 40);
NSString *path = [NSString stringWithFormat:#"URL/%#",object.imageName]; //"object" is the returned Object from the RSS, so basically what i am doing is appending the image name to the path url.
NSURL *url = [NSURL URLWithString:path];
NSData *data = [NSData dataWithContentsOfURL:url];
imageView.image = [UIImage imageWithData:data];
[cell addSubview:imageView];
[cell bringSubviewToFront:imageView];
so when i run my app the app runs slowly and even stops for a small amount of time, the reason for that is that i am loading all RSS imaged directly in this line NSData *data = [NSData dataWithContentsOfURL:url];
any solution for this problem ?
Thank you in advance
i actually thought of fetching the images in a separate thread,
dispatch_queue_t fetchImage = dispatch_queue_create("Fetching Image", NULL);
dispatch_async(fetchImage, ^{
NSData *data = [NSData dataWithContentsOfURL:url];
});
dispatch_release(fetchImage);
but doing so wont allow me to use the variable "data" outside the queue.
any idea ?
dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{
NSString *path = [NSString stringWithFormat:#"URL/%#",object.imageName];
NSURL *url = [NSURL URLWithString:path];
NSData *data = [NSData dataWithContentsOfURL:url];
dispatch_async(dispatch_get_main_queue(), ^{
imageView.image = [UIImage imageWithData:data];
}); });
The method [NSData dataWithContentsOfURL:] is synchronous: whenever you call it, it blocks the current thread (which is almost certainly your app's main thread) for as long as it takes to complete. This is very bad. Aside from making the UI feel janky, there's a watchdog process that will kill unresponsive apps.
You really, really want to use asynchronous network calls. Read up on NSURLConnection, but know, also, that there are many articles and libraries and samples out there on this exact subject: loading images asynchronously for display in a table view. Start with, maybe, AFNetworking's category on UIImageView, or maybe a library like SDWebImage.
You should retrieve your data asynchronously ! May be the use of a Open Source libraries will help you:
AFNetworking
ASIHTTPRequest - not recommended
Or you can also use the NSURLConnection class with the asynchronous mode.
I have a screen that will load around 5 images, but they are huge images. Right now I use a
NSURLRequest
and a:
connectionDidFinishLoading
..for callback to tell me when each image is loaded.
The problem is that images would pop up one by one. Is there a way to have it display the image while it loads?
Thanks
The guts of what you need to do this are available as CGImageSource methods.
First, you use an asynchronous NSURLConnection to get the data. You add received data to a NSMutableData object as it arrives, so the data object gets bigger and bigger til finished.
You also create a progressive image source:
CGImageSourceRef imageSourcRef = CGImageSourceCreateIncremental(dict);
You will find lots of examples here and on google how to set the dictionary required.
Then as the data arrives, you pass the TOTAL data object into this method:
CGImageSourceUpdateData(imageSourcRef, (__bridge CFDataRef)data, NO); // No means not finished
You can then ask the image source for an image, which will be partial as the image is downloading. With a CGImage you can create a UIImage.
When you get the final data, you update the image source on last time:
CGImageSourceUpdateData(imageSourcRef, (__bridge CFDataRef)data, YES);
You then use the image source to get a final image and you're done.
Displaying it while loading ,I don't think UIImageView can load UIImageswith incomplete data while loading.I will go for
AsyncImageView ,
It can deal with all the burden of loading image asynchronous.Also UIActivityIndicator is already added to it.So it will be more user friendly
Use blocks and GCD's dispatch_async method.
Look at this example:
//communityDetailViewController.h
#interface communityDetailViewController : UIViewController {
UIImageView *imgDisplay;
UIActivityIndicatorView *activity;
// the dispatch queue to load images
dispatch_queue_t queue;
}
#end
//communityDetailViewController.m
- (void)loadImage
{
[activity startAnimating];
NSString *url = #"URL the image";
if (!queue) {
queue = dispatch_queue_create("image_queue", NULL);
}
dispatch_async(queue, ^{
NSData *data = [NSData dataWithContentsOfURL:[NSURL URLWithString:url]];
UIImage *anImage = [UIImage imageWithData:data];
dispatch_async(dispatch_get_main_queue(), ^{
[activity stopAnimating];
activity.hidden = YES;
if (anImage != nil) {
[imgDisplay setImage:anImage];
}else{
[imgDisplay setImage:[UIImage imageNamed:#"no_image_available.png"]];
}
});
});
}
You can subclass UIImageView and use this.
-(void)connection:(NSURLConnection*)connection didReceiveResponse:(NSURLResponse*)response
{
imageData = [NSMutableData data];
imageSize = [response expectedContentLength];
imageSource = CGImageSourceCreateIncremental(NULL);
}
-(void)connection:(NSURLConnection*)connection didReceiveData:(NSData*)data
{
[imageData appendData:data];
CGImageSourceUpdateData(imageSource, (__bridge CFDataRef)imageData, ([imageData length] == imageSize) ? true : false);
CGImageRef cgImage = CGImageSourceCreateImageAtIndex(imageSource, 0, NULL);
if (cgImage){
UIImage* img = [[UIImage alloc] initWithCGImage:cgImage scale:1.0f orientation:UIImageOrientationUp];
dispatch_async( dispatch_get_main_queue(), ^{
self.image = img;
});
CGImageRelease(cgImage);
}
}
Okay, now I was making a mobile application like restaurant finder, I want to show a photo of the restaurant
the example : restaurant x <image x>
It's a code:
if (ImageToDisplay != nil)
{
NSData * imageData = [[[NSData alloc] initWithContentsOfURL: [NSURL URLWithString: ImageToDisplay.URL]]autorelease];
ImageForRestaurant.image = [UIImage imageWithData: imageData];
}
The problem is this process of downloading pictures may take too long. So I want the process to be run on a different thread.
That way the code after that can run without having to wait this one to finish.
How can I do so?
if (ImageToDisplay != nil) {
[self performSelectorInBackground:#selector(loadImage:) object:ImageToDisplay];
}
- (void)loadImage:(ImageToDisplay *)image { //Background method
NSAutoreleasePool *pool = [[NSAutoreleasePool alloc] init];
NSData * imageData = [[[NSData alloc] initWithContentsOfURL: [NSURL URLWithString: ImageToDisplay.URL]]autorelease];
[self performSelectorOnMainThread:#selector(setImageForRestaurant:) withObject:imageData waitUntilDone:NO];
[pool release];
}
- (void)setImageForRestaurant:(NSData *)imageData { //Change UI in main thread
ImageForRestaurant.image = [UIImage imageWithData: imageData];
}
I've just included basics in multi-threading; I guess it will serve your purpose
Did you try
- (void)performSelectorInBackground:(SEL)aSelector withObject:(id)arg
I think it's the easiest way.
Use the ASIHTTPRequest library. See 'Creating an asynchronous request' on this page: http://allseeing-i.com/ASIHTTPRequest/How-to-use
Also the new library AFNetworking looks promising. As they say:
If you're tired of massive libraries that try to do too much, if you've taken it upon yourself to roll your own hacky solution, if you want a library that actually makes iOS networking code kinda fun, try out AFNetworking.