I have a paged slider view with an image on each page. I'm using NSOperationQueue to help me download the images from the server while the program is running. The NSOperationQueue is used to call the following method,
-(NSData *)imageWith:(NSString *)imageName
{
NSString *imagePath = [[NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES) objectAtIndex:0] stringByAppendingPathComponent:imageName];
NSData *imageData = [NSData dataWithContentsOfFile:imagePath];
if (!imageData) {
imageData = [[NSData alloc] initWithContentsOfURL:[NSURL URLWithString:[[NSString stringWithFormat:#"%#/%#", picsURL,imageName] stringByAddingPercentEscapesUsingEncoding:NSASCIIStringEncoding]]];
if (imageData) {
[imageData writeToFile:imagePath atomically:YES];
}
}
return imageData;
}
and then I use the main thread to display the downloaded image on the scrollerview:
[self performSelectorOnMainThread:#selector(loadPic:) withObject:[NSArray arrayWithObjects:[self imageWith:[picsNames objectAtIndex:imageView.tag]], [NSString stringWithFormat:#"%d", imageView.tag], nil] waitUntilDone:YES];
which calls the following method:
-(void)loadPic:(NSArray *)imageAndTagArray
{
if (imageAndTagArray.count) {
//loading the image to imageview
UIImageView *imageView = (UIImageView *)[scrollView viewWithTag:[[imageAndTagArray objectAtIndex:1] intValue]];
imageView.image = [UIImage imageWithData:((NSData *)[imageAndTagArray objectAtIndex:0])];
//stopping the indicator
[((UIActivityIndicatorView *)[imageView viewWithTag:ACTIVITY_INDICATOR_TAG]) stopAnimating];
}
}
Everything works fine for the first 60 images, but after that I receive a Memory Warning and after about 100 images the app crashes.
I have been spending so much time on this and I can't figure out what to do. I've used Instruments and it doesn't detect any leak. I've also used Analyze and that did show anything either.
EDIT:
If I replace the imageWith: method definition with the following definition I still get the warnings, where 5.jpg is a local image.
-(NSData *)imageWith:(NSString *)imageName
{
return UIImagePNGRepresentation([UIImage imageNamed:#"5.jpg"]);
}
Let me tell you more about the situation.
When the app starts I have a view with a paged scrollview inside it that contains 9 images per page. the scrollview uses the nsoperationqueue to load images which calls the imageWith: method.
when the user taps on any of the images a second view opens with a full display of the selected image. this second view also has a scroll view that contains the same images as the first view but with full display, meaning 1 image per page.
when you are on the second view and scrolling back and forth the app crashes after loading about 60 images.
It also crashes if say it loads 50 images and then you tap on the back button and go to the first view and then tap on another image and go to the second view and load about 10 images.
It sounds like you're holding too many images in memory. When you open the second view, it's reloading the images again from disk, until you end up with two copies of all the images.
The UIImage class may be able to help you with this memory management. In its reference page, it mentions that it has the capability to purge its data in low-memory situations and then reload the file from disk when it needs to be drawn again. This might be your solution.
However, as you're creating the image from an NSData read from disk, the UIImage will probably not be able to purge its memory - it won't know that your image is simply stored on the disk, so it can't throw away the data and reload it later.
Try changing your "imageWith" method to create a UIImage (via imageWithContentsOfFile) from the file URL on the disk just before it returns, and return the UIImage rather than returning the intermediate NSData. That way, the UIImage will know where on disk its image source came from and be able to intelligently purge/reload it as memory becomes constrained on the device.
Related
UIImageView has animationImages for animating sequence of images. That works fine. But It holds the images object. So There is a spike in use of memory when this animation is happening. I tried NSTimer for setting image property of that image view, But it doesn't work.
Can we achieve this in any other approach?
Instead of looking for alternatives, just try to correct the existing code.
The best practice of allocating an image for animationImages should be using initWithContentsOfFile instead of imageNamed:
imageNamed: it cache’s your images and you lose control over the memory - there's no guarantee that releasing the object will actually release the image but does provide faster loading of images second time around as they are cached.
imageWithContentsOfFile: it does not cache images and is more memory friendly however as it does not cache images and the heavier images are loaded much slower.
When the animation does stop, just release the image collection array. If you are using ARC then make it the image collection array to nil.
Best Practice:
for(int itemIndex = 0; itemIndex < 20; itemIndex++) {
NSString *filePath = [[NSBundle mainBundle] pathForResource:#"myImage1" ofType:#"png"];
UIImage *image = [[UIImage alloc] initWithContentsOfFile:filePath];
[imageArray addObject:image];
}
After the Animation:
imageArray = nil;
My iOS app utilizes a loop to cycle through images in a folder.
My application is supposed to loop through a total of 2031 images (sized 1200x900) inside a folder. The images were taken at 8fps and each image will be displayed as the loop continues to simulate a video clip. After the 696th picture, the images will cease to be displayed in the UIImageView although the app will continue looping.
I tested to see if the disconnect was because of the picture not existing
I started the loop at picture 200, but after picture 896 the UIImageView stop displaying the pictures.
The Code:
imgName = [NSString stringWithFormat:#"subject_basline_mat k (%d).png",jojo];
jojo++;
imageToCrop.image = [UIImage imageNamed:imgName]; //imageToCrop is the name of the UIImageView image and it is set to the image file here
imageToCrop.image = [self imageWithImage:imageToCrop.image convertToSize:self.imageToCrop.frame.size]; //Here the image is converted to fit the bounds of the simulator which is 320x240
The code loops due to a timer that loops it about once every 0.8 seconds.
I ran my code with instruments to see if there was a memory problem occurring,and instruments is very heavy on my computer. As such, my application ran quite slowly. However, when I arrived at the 696th picture, the pictures kept displaying themselves. It was almost as if my application running too quickly caused the picture to not be displayed... which I don't really understand.
The only memory heavy part of the image switching seems to be the size conversion step which is called by the line imageToCrop.image = [self imageWithImage:imageToCrop.image convertToSize:self.imageToCrop.frame.size];
imageToCrop.image = [self imageWithImage:imageToCrop.image convertToSize:self.imageToCrop.frame.size];
The method "imageWithImage" is here:
- (UIImage *)imageWithImage:(UIImage *)image convertToSize:(CGSize)size {
#autoreleasepool {
UIGraphicsBeginImageContext(size);
[image drawInRect:CGRectMake(0, 0, size.width, size.height)];
UIImage *destImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return destImage;
}
And the line [image drawInRect:CGRectMake(0, 0, size.width, size.height)]; uses around up the most memory out of all the image management in the app.
Any Ideas as to why my app will only display a certain amount of images?
Try loading the full-size images from the app bundle by URL. For example:
#autoreleasepool {
NSString *imgName = [NSString stringWithFormat:#"subject_basline_mat k (%d)",jojo];
NSURL *imageURL = [[NSBundle mainBundle] URLForResource:imgName withExtension:#"png"];
UIImage *image = [UIImage imageWithContentsOfFile:[imageURL path]];
imageToCrop.image = [self imageWithImage:image convertToSize:self.imageToCrop.frame.size];
}
Almost for sure your problem is [UIImage imageNamed:imgName]. There are hundreds of posts here on the pitfalls of using it. The issue is that it caches the images - its real purpose is for some small number of images in your bundle.
If you have oodles of images, get the path to the image, then get the image through a URL or file pointer. That way its not cached. Note that when you do this, you lose the automatic "get-retina-image-automatically", and so you will need to grab the appropriately sized image depending on whether the device is retina or not.
In my app, I receive a list of image URLs to use as thumbnails in my table view. The tableview has a small amount of items, approximately 30, so I want to load all the thumbnails immediately (instead of when they become visible, as they undoubtedly will become visible and I want them fully loaded then).
I want to prioritize the image downloads by index path, so the first index path has priority over the second, which has priority over the third, etc.
However, if I suddenly jump to the end of the table view (which shows, say, index paths 24-29) I want the images for those index paths to become highest priority, so if they jump at the very beginning they won't have to wait for all the others to download first.
How would I go about designing something like this? If it's possible with SDWebImage that'd be great, as I'm comfortable with that, but if not I'm more than fine with creating something from scratch with NSURLSession. (I've looked at SDWebImage, and the SDWebImagePrefetcher looks promising, but doesn't allow priority changing from what I've seen.)
I recently had a similar problem, but didn't need to have a priority to load. I can't think of how to change the priority of what is loaded unless you do the loading of thumbnails before loading the tableview. Tableviews load cells as they are needed.
I can think of two options:
If you want all the data loaded and ready before the tableview is even loaded, preemptively load the data in an earlier view controller and save it to be opened in the view controller containing your table view. Then no requests will have to be made by your tableview and everything will appear seamlessly.
The tableview sends each thumbnail request asynchronously and updates the cell as the images arrive on the main thread. You can then cache or save the images after they arrive. But the images won't appear instantly, generally a split second later.
I did option two using NSCache. The value for key "avatar" is the URL of the thumbnail image. This code is located in my - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
if (![teamMember[#"avatar"] isEqualToString:#""]) {
// check for cached image, use if it exists
UIImage *cachedImage = [self.imageCache objectForKey:teamMember[#"avatar"]];
if (cachedImage) {
cell.memberImage.image = cachedImage;
}
//else retrieve the image from server
else {
NSURL *imageURL = [NSURL URLWithString:teamMember[#"avatar"]];
dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_BACKGROUND, 0), ^{
NSData *imageData = [NSData dataWithContentsOfURL:imageURL];
// if valid data, create UIImage
if (imageData) {
UIImage *image = [UIImage imageWithData:imageData];
// if valid image, update in tableview asynch
if (image) {
dispatch_async(dispatch_get_main_queue(), ^{
TeamCommitsCell *updateCell = (id)[tableView cellForRowAtIndexPath:indexPath];
// if valid cell, display image and add to cache
if (updateCell) {
updateCell.memberImage.image = image;
[self.imageCache setObject:image forKey:teamMember[#"avatar"]];
}
});
}
}
});
}
}
First of all this is not a duplicate. I have seen some identical questions but they didn't help me as my problem varies a little bit.
Using the following code i am download the images asynchronously in my project.
{
NSURL *imageURL = [NSURL URLWithString:imageURLString];
[self downloadThumbnails:imageURL];
}
- (void) downloadThumbnails:(NSURL *)finalUrl
{
dispatch_group_async(((RSSChannel *)self.parentParserDelegate).imageDownloadGroup, dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{
NSData *tempData = [NSData dataWithContentsOfURL:finalUrl];
dispatch_async(dispatch_get_main_queue(), ^{
thumbnail = [UIImage imageWithData:tempData];
});
});
}
Due to the logic of the program, i have used the above code in files other than the tableview controller which is showing all the data after getting it from the web service.
PROBLEM: On screen images does not show up until i scroll. The off screen images are refreshed first. What can i do to solve my problem.
Apple's lazy loading project is using scrollViewDidEndDragging and scrollViewDidEndDecelerating to load the images but the project is way too big to understand plus my code is in files other than the tableview controller.
NOTE: Kindly do not recommend third party libraries like SDWebImage etc.
UPDATE: As most of people are unable to get the problem, i must clarify that this problem is not associated with downloading, caching and re-loading the images in tableview. So kindly do not recommend third party libraries. The problem is that images are only showing when the user scrolls the tableview instead of loading the on screen ones.
Thanks in advance
I think what you have to do is:
display some placeholder image in your table cell while the image is being downloaded (otherwise your table will look empty);
when the downloaded image is there, send a refresh message to your table.
For 2, you have two approaches:
easy one: send reloadData to your table view (and check performance of your app);
send your table view the message:
- (void)reloadRowsAtIndexPaths:(NSArray *)indexPaths withRowAnimation:(UITableViewRowAnimation)animation
Using reloadRowsAtIndexPaths is much better, but it will require you to keep track of which image is associated to which table row.
Keep in mind that if you use Core Data to store your images, then this workflow would be made much much easier by integrating NSFetchedResultController with your table view. See here for an example.
Again another approach would be using KVO:
declare this observe method in ItemsViewCell:
- (void)observeValueForKeyPath:(NSString *)keyPath
ofObject:(id)object
change:(NSDictionary *)change
context:(void *)context {
if ([keyPath isEqual:#"thumbnail"]) {
UIImage* newImage = [change objectForKey:NSKeyValueChangeNewKey];
if (newImage != (id)[NSNull null]) {
self.thumbContainer.image = newImage;
[self.thumbContainer setNeedsLayout];
}
}
}
then, when you configure the cell do:
RSSItem *item = [[channel items] objectAtIndex:[indexPath row]];
cell.titleLabel.text = [item title];
cell.thumbContainer.image = [item thumbnail];
[item addObserver:cell forKeyPath:#"thumbnail" options:NSKeyValueObservingOptionNew context:NULL];
By doing this, cell will be notified whenever the given item "thumbnail" keypath changes.
Another necessary change is doing the assignment like this:
self.thumbnail = [UIImage imageWithData:tempData];
(i.e., using self.).
ANOTHER EDIT:
I wanted to download and load the images just like in the LazyTableImages example by Apple. When its not decelerating and dragging, then only onscreen images are loaded, not all images are loaded at once.
I suspect we are talking different problems here.
I thought your issue here was that the downloaded images were not displayed correctly (if you do not scroll the table). This is what I understand from your question and my suggestion fixes that issue.
As to lazy loading, there is some kind of mismatch between what you are doing (downloading the whole feed and then archiving it as a whole) and what you would like (lazy loading). The two things do not match together, so you should rethink what you are doing.
Besides this, if you want lazy loading of images, you could follow these steps:
do not load the image in parser:foundCDATA:, just store the image URL;
start downloading the image in tableView:cellForRowAtIndexPath: (if you know the URL, you can use dataWithContentOfURL as you are doing on a separate thread);
the code I posted above will make the table update when the image is there;
at first, do not worry about scrolling/dragging, just make 1-2-3 work;
once it works, use the scrolling/dragging delegate to prevent the image from being downloaded (point 2) during scrolling/dragging; you can add a flag to your table view and make tableView:cellForRowAtIndexPath: download the image only if the flag says "no scrolling/dragging".
I hope this is enough for you to get to the end result. I will not write code for this, since it is pretty trivial.
PS: if you lazy load the images, your feed will be stored on disk without the images; you could as well remove the CGD group and CGD wait. as I said, there is not way out of this: you cannot do lazy loading and at the same time archive the images with the feed (unless each time you get a new image you archive the whole feed). you should find another way to cache the images.
Try using SDWebImage, it's great for using images from the web in UITableViews and handles most of the work for you.
The best idea is caching the image and use them. I have written the code for table view.
Image on top of Cell
It is a great solution.
Try downloading images using this code,
- (void) downloadThumbnails:(NSURL *)finalUrl
{
NSURLRequest* request = [NSURLRequest requestWithURL:finalUrl];
[NSURLConnection sendAsynchronousRequest:request
queue:[NSOperationQueue mainQueue]
completionHandler:^(NSURLResponse * response,
NSData * data, NSError * error)
{
if (!error)
{
thumbnail = [UIImage imageWithData:data];
}
}];
}
In my ViewController, I'm downloading a number of png files off the internet and adding them to UIImageViews, which I add to a UIScrollView.
However, if the user presses the back button in the navigation bar, I noticed that the background thread is still continuing to download those files. Also, I noticed huge memory spikes as a result, and I don't think my objects are properly getting released.
How can I close all threads when the user presses back in the navigation bar?
xcode 4.2.1, ARC
Thanks!
EDIT -- the following is in a for loop
NSURL* url = [[NSURL alloc] initWithString:[#"someurl"]];
NSData* imageData = [[NSData alloc]initWithContentsOfURL:url];
UIImage* image = [[UIImage alloc] initWithData:imageData];
UIImageView *imageView = [[UIImageView alloc] initWithImage:image];
imageView.frame = aFrame;
[self.screenshots addSubview:imageView]
You shouldn't be doing any downloading in your view controller. That's the source of the problem. Move your data into model classes. Do all of your downloading and data management there. The view controllers are just responsible for pulling data from the model and giving it to the views. View controllers are not responsible for fetching data from the network. As you've discovered, they can vanish at any time.
You don't want to abort downloads and then restart them every time someone moves between screens. You want to let the model classes know that some data is needed (because the user came to a screen), and then you want the model classes to post a notification (or provide a KVO change notification) that lets the view controllers know that new data is read.
You may want to consider NSOperationQueue and add new download operations via. NSURLConnection and add a supply your NSOperationQueue. You can have more then one source downloading at once and cancel all operations at once once you need to. Also you can set things like how many to download at a time.
Try this:
in your for loop, make a condition that would stop the downloads when you don't want them anymore:
declare class variable or properly
BOOL stopDownloading;
set it to false on when you start the downloads:
stopDownloading = NO;
modify your for loop to stop when you set it to NO:
if (!stopDownloading) {
NSURL* url = [[NSURL alloc] initWithString:[#"someurl"]];
NSData* imageData = [[NSData alloc]initWithContentsOfURL:url];
UIImage* image = [[UIImage alloc] initWithData:imageData];
UIImageView *imageView = [[UIImageView alloc] initWithImage:image];
imageView.frame = aFrame;
[self.screenshots addSubview:imageView];
}
so now, when back button is pressed, set
stopDownloading = YES;
it will stop all further downloads, however due to your setup, i don't immediately see a way to stop the one that is currently downloading (only subsequent ones).
To solve this problem, i would create a NSOperationQueue and add NSOperations for each download.
Or even simpler, use some existing open source solutions like AFNetworking. specifically these two:
AFImageRequestOperation A subclass of AFHTTPRequestOperation for downloading and processing images.
UIImageView+AFNetworking Adds methods to UIImageView for loading remote images asynchronously from a URL.