I have a TableViewCell with an ImageView, and I am setting the image like so:
[self.contentImageView setImageWithURL:thumbnail_url];
The contentMode is set to UIViewContentModeScaleAspectFill, and the subviews are clipped.
This works best for images that are either Portrait or Landscape, but UIViewContentModeScaleToFill actually works better for Landscape images, which are far more plentiful.
So, I want to detect the orientation of the image by comparing the width and height, and change the contentMode accordingly.
At first, I tried to inspect/log the ImageView.image property, directly after I set it from the url, but it show's nil. not sure why exactly...?
Next, I decided to put that NSURL into an NSData object, then create an UIImage from that data, and set the ImageView's image property with that iVar, like so:
NSData *data = [NSData dataWithContentsOfURL:thumbnail_url];
UIImage *image = [UIImage imageWithData:data];
[self.contentImageView setImage:image];
// Get image.size etc.
This - particularly the NSData call - slows down the loading of the TableViewCell's considerably, so I'd like to avoid it.
So, I'm wondering if there is anyway to reach into the un-cropped source image properties of the ImageView before the scaling happens to the contentMode?
The problem here is your misunderstanding of how that first method works. setImageWithURL: is a method from one of the open source image loading libraries. Probably either AFNetworking or SDWebImage.
These methods are asynchronous and return immediately. They download the image on a background queue and then return to the main queue to set up the view with it. You are trying to access the image before it is downloaded. The reason the manual NSData approach is working is because it is synchronous and the main queue is stuck while the images download.
Both libraries I mentioned have separate methods with a callback block on the main queue allowing you to act on the response.
For AFNetworking you can use this method:
- (void)setImageWithURLRequest:(NSURLRequest *)urlRequest
placeholderImage:(UIImage *)placeholderImage
success:(void (^)(NSURLRequest *request, NSHTTPURLResponse *response, UIImage *image))success
failure:(void (^)(NSURLRequest *request, NSHTTPURLResponse *response, NSError *error))failure;
For SDWebImage you can use this method:
- (void)sd_setImageWithURL:(NSURL *)url completed:(SDWebImageCompletionBlock)completedBlock;
In either of these, the callback blocks will let you access the image once it is downloaded (if successful).
You can also make something like this work manually using the dataWithContentsOfURL: approach by using GCD like this:
dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^()
{
NSData *data = [NSData dataWithContentsOfURL:thumbnail_url];
UIImage *image = [UIImage imageWithData:data];
dispatch_async(dispatch_get_main_queue(), ^()
{
[self.contentImageView setImage:image];
});
});
This is a basic pattern used in networking to perform the network request and processing on a background queue before updating the view on the main queue. Keep in mind this particular piece of code is very simplistic and would require more work to work as nicely as the libraries I mentioned above.
Is it safe to load UIImageView objects in the background, and when done, insert them in the view hierarchy on main thread?
For example you create a GCD block which loads 10 image views in background. At the end you have async block which adds all the UIImageViews to view hierarchy.
I heard if you create a UIImage and add it to a UIImageView then the image data gets loaded on demand when the UIImageView needs it. How would I force that the UIImage data gets pulled in the background so it doesnt block main thread for long loading time?
It is always better that if you are downloading images from server you download them on separate thread so It don't block your UI. Once image download complete you can set to that to a specific image view from main thread.
__weak typeof(self) weakSelf = self;
dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_BACKGROUND, 0), ^(void) {
NSData *imageData= [NSData dataWithContentsOfURL:Image_URL];
UIImage *image = [UIImage imageWithData:imageData];
dispatch_sync(dispatch_get_main_queue(), ^(void) {
__strong __typeof__(weakSelf) strongSelf = weakSelf;
strongSelf.someImageView.image = image;
;
});
});
NOTE:
If you are using AFNetworking, you can use UIImageView category and it will handel loading image in background and also can cache it, so If you want to download again it will bring that image from cache.
I have an UIView with an UIImageView subview. I need to load an image in the UIImageView without blocking the UI. The blocking call seems to be: UIImage imageNamed:. Here is what I thought solved this problem:
-(void)updateImageViewContent {
dispatch_async(
dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_BACKGROUND, 0), ^{
UIImage * img = [UIImage imageNamed:#"background.jpg"];
dispatch_sync(dispatch_get_main_queue(), ^{
[[self imageView] setImage:img];
});
});
}
The image is small (150x100).
However the UI is still blocked when loading the image. What am I missing ?
Here is a small code sample that exhibits this behaviour:
Create a new class based on UIImageView, set its user interaction to YES, add two instances in a UIView, and implement its touchesBegan method like this:
-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
if (self.tag == 1) {
self.backgroundColor= [UIColor redColor];
}
else {
dispatch_async(dispatch_get_main_queue(), ^{
[self setImage:[UIImage imageNamed:#"woodenTile.jpg"]];
});
[UIView animateWithDuration:0.25 animations:
^(){[self setFrame:CGRectInset(self.frame, 50, 50)];}];
}
}
Assign the tag 1 to one of these imageViews.
What happens exactly when you tap the two views almost simultaneously, starting with the view that loads an image? Does the UI get blocked because it's waiting for [self setImage:[UIImage imageNamed:#"woodenTile.jpg"]]; to return ? If so, how may I do this asynchronously ?
Here is a project on github with ipmcc code
Use a long press then drag to draw a rectangle around the black squares. As I understand his answer, in theory the white selection rectangle should not be blocked the first time the image is loaded, but it actually is.
Two images are included in the project (one small: woodenTile.jpg and one larger: bois.jpg). The result is the same with both.
Image format
I don't really understand how this is related to the problem I still have with the UI being blocked while the image is loaded for the first time, but PNG images decode without blocking the UI, while JPG images do block the UI.
Chronology of the events
The blocking of the UI begins here..
.. and ends here.
AFNetworking solution
NSURL * url = [ [NSBundle mainBundle]URLForResource:#"bois" withExtension:#"jpg"];
NSURLRequest * request = [NSURLRequest requestWithURL:url];
[self.imageView setImageWithURLRequest:request
placeholderImage:[UIImage imageNamed:#"placeholder.png"]
success:^(NSURLRequest *request, NSHTTPURLResponse *response, UIImage *image) {
NSLog(#"success: %#", NSStringFromCGSize([image size]));
} failure:^(NSURLRequest *request, NSHTTPURLResponse *response, NSError *error) {
NSLog(#"failure: %#", response);
}];
// this code works. Used to test that url is valid. But it's blocking the UI as expected.
if (false)
if (url) {
[self.imageView setImage: [UIImage imageWithData:[NSData dataWithContentsOfURL:url]]]; }
Most of the time, it logs: success: {512, 512}
It also occasionnaly logs: success: {0, 0}
And sometimes: failure: <NSURLResponse: 0x146c0000> { URL: file:///var/mobile/Appl...
But the image is never changed.
The problem is that UIImage doesn't actually read and decode the image until the first time it's actually used/drawn. To force this work to happen on a background thread, you have to use/draw the image on the background thread before doing the main thread -setImage:. This worked for me:
dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_BACKGROUND, 0), ^{
UIImage * img = [UIImage imageNamed:#"background.jpg"];
// Make a trivial (1x1) graphics context, and draw the image into it
UIGraphicsBeginImageContext(CGSizeMake(1,1));
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextDrawImage(context, CGRectMake(0, 0, 1, 1), [img CGImage]);
UIGraphicsEndImageContext();
// Now the image will have been loaded and decoded and is ready to rock for the main thread
dispatch_sync(dispatch_get_main_queue(), ^{
[[self imageView] setImage: img];
});
});
EDIT: The UI isn't blocking. You've specifically set it up to use UILongPressGestureRecognizer which waits, by default, a half a second before doing anything. The main thread is still processing events, but nothing is going to happen until that GR times out. If you do this:
longpress.minimumPressDuration = 0.01;
...you'll notice that it gets a lot snappier. The image loading is not the problem here.
EDIT 2: I've looked at the code, as posted to github, running on an iPad 2, and I simply do not get the hiccup you're describing. In fact, it's quite smooth. Here's a screenshot from running the code in the CoreAnimation instrument:
As you can see on the top graph, the FPS goes right up to ~60FPS and stays there throughout the gesture. On the bottom graph, you can see the blip at about 16s which is where the image is first loaded, but you can see that there's not a drop in the frame rate. Just from visual inspection, I see the selection layer intersect, and there's a small, but observable delay between the first intersection and the appearance of the image. As far as I can tell, the background loading code is doing its job as expected.
I wish I could help you more, but I'm just not seeing the problem.
You can use AFNetworking library , in which by importing the category
"UIImageView+AFNetworking.m"
and by using the method as follows :
[YourImageView setImageWithURL:[NSURL URLWithString:#"http://image_to_download_from_serrver.jpg"]
placeholderImage:[UIImage imageNamed:#"static_local_image.png"]
success:^(NSURLRequest *request, NSHTTPURLResponse *response, UIImage *image) {
//ON success perform
}
failure:NULL];
hope this helps .
I had a very similar issue with my application where I had to download lot of images and along with that my UI was continuously updating. Below is the simple tutorial link which resolved my issue:
NSOperations & NSOperationQueues Tutorial
this is the good way:
-(void)updateImageViewContent {
dispatch_async(dispatch_get_main_queue(), ^{
UIImage * img = [UIImage imageNamed:#"background.jpg"];
[[self imageView] setImage:img];
});
}
Why don't you use third party library like AsyncImageView? Using this, all you have to do is declare your AsyncImageView object and pass the url or image you want to load. An activity indicator will display during the image loading and nothing will block the UI.
-(void)touchesBegan: is called in the main thread. By calling dispatch_async(dispatch_get_main_queue) you just put the block in the queue. This block will be processed by GCD when the queue will be ready (i.e. system is over with processing your touches). That's why you can't see your woodenTile loaded and assigned to self.image until you release your finger and let GCD process all the blocks that have been queued in the main queue.
Replacing :
dispatch_async(dispatch_get_main_queue(), ^{
[self setImage:[UIImage imageNamed:#"woodenTile.jpg"]];
});
by :
[self setImage:[UIImage imageNamed:#"woodenTile.jpg"]];
should solve your issue… at least for the code that exhibits it.
Consider using SDWebImage: it not only downloads and caches the image in the background, but also loads and renders it.
I've used it with good results in a tableview that had large images that were slow to load even after downloaded.
https://github.com/nicklockwood/FXImageView
This is an image view which can handle background loading.
Usage
FXImageView *imageView = [[FXImageView alloc] initWithFrame:CGRectMake(0, 0, 100.0f, 150.0f)];
imageView.contentMode = UIViewContentModeScaleAspectFit;
imageView.asynchronous = YES;
//show placeholder
imageView.processedImage = [UIImage imageNamed:#"placeholder.png"];
//set image with URL. FXImageView will then download and process the image
[imageView setImageWithContentsOfURL:url];
To get an URL for your file you might find the following interesting:
Getting bundle file references / paths at app launch
When you are using AFNetwork in an application, you do not need to use any block for load image because AFNetwork provides solution for it. As below:
#import "UIImageView+AFNetworking.h"
And
Use **setImageWithURL** function of AFNetwork....
Thanks
One way i've implemented it is the Following: (Although i do not know if it's the best one)
At first i create a queue by using Serial Asynchronous or on Parallel Queue
queue = dispatch_queue_create("com.myapp.imageProcessingQueue", DISPATCH_QUEUE_SERIAL);**
or
queue = dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_HIGH,0);
**
Which ever you may find better for your needs.
Afterwards:
dispatch_async( queue, ^{
// Load UImage from URL
// by using ImageWithContentsOfUrl or
UIImage *imagename = [UIImage imageWithData:[NSData dataWithContentsOfURL:url]];
// Then to set the image it must be done on the main thread
dispatch_sync( dispatch_get_main_queue(), ^{
[page_cover setImage: imagename];
imagename = nil;
});
});
There is a set of methods introduced to UIImage in iOS 15 to decode images and create thumbnails asynchronously on background thread
func prepareForDisplay(completionHandler: (UIImage?) -> Void)
Decodes an image asynchronously and provides a new one for display in views and animations.
func prepareThumbnail(of: CGSize, completionHandler: (UIImage?) -> Void)
Creates a thumbnail image at the specified size asynchronously on a background thread.
You can also use a set of similar synchronous APIs, if you need more control over where you want the decoding to happen, e.g. specific queue:
func preparingForDisplay() -> UIImage?
func preparingThumbnail(of: CGSize) -> UIImage?
I need to implement my custom drawRect: method in my custom table cell in order to speed up tableview scrolling, however, there's an image the app should download from web, so I want to add image cache to my app. The origin implementation of my app is using SDWebImage library, which implement an imageView which offer download image method. If I want to add image in drawRect:, how to implement downloading image from web and cache them?
You need to use SDWebImage to download and cache the image. Then in delegate/completion block of that download operation, you need to assign the image to your a property and call setNeedsDisplay. setNeedsDisplay will cause your view to be redrawn. This should be called on mainQueue.
[[SDWebImageManager sharedManager] downloadWithURL:[NSURL URLWithString:theArticle.imageURL] options:SDWebImageLowPriority progress:nil completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType, BOOL finished) {
dispatch_async(bakground_queue, ^{
//Here you probably want to dispatch_async to a background queue to do all the image resizing first before drawing on main queue
dispatch_async(dispatch_get_main_queue(), ^{
weakSelf.thumbnailImage = image;
[weakSelf setNeedsDisplay];
});
});
}];
In your drawRect, you need to draw from that property. For e.g
[self.image drawInRect:rect]
This is just basic principle of how this can be achieved. Probably needs more work to really optimize it (e.g cancel the downloading operation when not needed)
Edited:
SDWebImageManager has a delegate method to resize/transform image before storing it to disk cache. You might want to use that method instead of dispatch_async to background queue like above.
I have an iOS app that has a UITableView with custom TableViewCells that contain a UIImageView. The image is loaded from a web service, so during the initial load, I display a "loading" image, and then use gcd to dispatch and get the image matching the data for that cell.
When I use a DISPATCH_QUEUE_PRIORITY_HIGH global queue to perform the image fetch, I sporadically get the wrong images loading in the tableview cells. If I use my own custom queue then the correct images get populated into the cells but the tableview performance is awful.
Here is the code...
// See if the icon is in the cache
if([self.photoCache objectForKey:[sample valueForKey:#"api_id"]]){
[[cell sampleIcon]setImage:[self.photoCache objectForKey:[sample valueForKey:#"api_id"]]];
}
else {
NSLog(#"Cache miss");
[cell.sampleIcon setImage:nil];
dispatch_queue_t cacheMissQueue = dispatch_queue_create("cacheMissQueue", NULL);
//dispatch_queue_t cacheMissQueue = dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_HIGH, 0ul);
dispatch_async(cacheMissQueue, ^{
if(sample.thumbnailFilename && sample.api_id){
NSData *thumbNailData = [[NSData alloc] initWithContentsOfFile:sample.thumbnailFilename];
UIImage *thumbNailImage = [[UIImage alloc]initWithData:thumbNailData];
if(thumbNailImage){
// Set the cell
dispatch_sync(dispatch_get_main_queue(), ^{
[[cell sampleIcon]setImage:thumbNailImage];
[cell setNeedsLayout];
});
// save it to cache for future references
NSLog(#"DEBUG: Saving to cache %# for sample %#",sample.thumbnailFilename,[sample objectID]);
[self.photoCache setObject:thumbNailImage forKey:sample.api_id];
}
}
});
dispatch_release(cacheMissQueue);
}
Watching the WWDC 2012 session #211 helped a lot and I changed the code from using GCD to NSOperationQueue and it solved the problem.
New code...
[[self imgQueue]addOperationWithBlock:^{
if(sample.thumbnailFilename && sample.api_id){
NSData *thumbNailData = [[NSData alloc] initWithContentsOfFile:sample.thumbnailFilename];
UIImage *thumbNailImage = [[UIImage alloc]initWithData:thumbNailData];
if(thumbNailImage){
// Set the cell
[[NSOperationQueue mainQueue]addOperationWithBlock:^{
[[cell sampleIcon]setImage:thumbNailImage];
[cell setNeedsLayout];
}];
// save it to cache for future references
[self.photoCache setObject:thumbNailImage forKey:sample.api_id];
}
}
}];
When you finally get an image, you need an association between the indexPath of the cell and the image. Since this is on a backgound thread, what I suggest you do is post a nofification using a block to the mainQueue that such and such an image is available. On the main thread only, you ask the tableView for the array of visible cells, and if the cell you have an image for is showing, you can then set the image directly at that time (your on the main thread, you know the cell is there and showing, and its not going to change for this runloop iteration.) If the cell is not showing, no problem, next time that cell comes into scope you will have the image waiting for it. I am doing this now in my app, its been out many months, and its all working well and getting good reviews on responsiveness (just as your app will if you do this!)