How to load images from server to tableView efficiently? - iphone

I have a table view with all cells having the UITableViewCellStyleSubtitle,
the images of all the cells are got from the server.
However, those images are not changed frequently.
Someone can show me how to improve the user experience? Each time, user scroll down the table, it seems that it goes online to check and download images again.
Or at least, show me some options that are available to achieve the goal.
Thanks,

The Three20 library has an ImageView subclass that accepts a URL to your remote image and uses the excellent TTURLRequest/Caching mechanism to fetch images. It maintains an in-memory and on-disk cache and will only download images if they are not cached or have expired. You can configure the default cache-expiration time or use a value from your HTTP response. If you use the TTTableViewController subclass and the appropriate TTTableItem subclass, you will get the appropriate image downloading behavior for free. However, it is not necessary to use every three component to do what you need. If you're integrating into existing code, you could create your own UITableViewCell subclass that uses a TTImageView instead of the standard UIImageView. Then, in your cell configuration methods, you can set a default placeholder image and a URL to load and it will pretty much take care of the rest. As a performance optimization, you should also implement the UIScrollView delegate methods in your tableview controller to suspend the TTURLRequestQueue during scrolling (take a look at the TTTableViewController to see how this is done).

You could try one of the following
Create an dictionary and cache all the fetched images in it using the image name as the key
Cache and reuse the entire UITableView cells in tableView:cellForRowAtIndexPath:
If it is just one image repeating load it one outside tableView:cellForRowAtIndexPath:
You write that the images change on a monthly basis - you could save the images to disk as they are used and just either check if the images have changed on the back burner or at a given daily interval redownload the images. Brian Chapados reply seems interesting .
Depending on your code there is probably a ton of other ways to improve image loading. Hope that helps...

Related

How to create an application which uses bulk of images from web service

I am newly in iOS development.I have to make an application for a car dealer in which i have to show different cars with different colors.Please tell me the best way because i have to fetch lots of images every time from the web server.How can i reduce the rendering time in fetching the images.
Please consider i am very new in ios development and need your help.
If you have any sample application please share it with me.
You can use DB to store images as BLOB and also fetch images only when there is update at server.
First, make sure you send images that are no larger than needed.
If you have a list view that shows pictures of the cars, have a webservice send you premade thumbnails that are (preferably) exactly the right size.
Second, Make sure the images are loaded separately from the data set.
The best place to do this, would be in the controllers for your UITableViewCell.
Just have your UITableViewCell start their own thread to download and display the image as soon as they come into view.
Third; caching.
Make sure you save local copies of the thumbnails, and make sure the Table View Cells search for local copies of the images, and load those instead of downloading them if they are already locally present.
you can do:-
use lazy loading
use paging
use predicates for searches
use fast enumeration
these things in general will keep your app smooth
If you are going to show images in UITableView then you can use lazy loading. It will load images only for the displayed rows and once image for any row index has been downloaded, it will not repeat downloading for that row index. So its faster and useful.

ios load images from web server and show on UITableViewCell

For the iPhone 5.0 (ARC) I am getting lot of image(image url's) and text data from server in a json form. My requirement is to load the first five images from the server and when the user scrolls down the next five images load and so on. I need to show it in a UITableViewCell. By doing this I can reduce the network calls and make the application faster on the device.
Currently, I am using a background thread to load images, but they continuously load in the background. I don't want to do it like this.
I strongly encourage you to use the AFNetworking framework (that is really great and complete for all network-related tasks).
It comes with a category on UIImageView that allows you to set the UIImageView's image directly from an NSURL, managing everything for you in the background, like downloading the image or fetching it from its cache, cancelling the request if you change the URL later to avoid useless requests, etc.
Then in your tableView:cellForRowAtIndexPath: you can simply write this kind of code:
[cell.imageView setImageWithURL:yourURL];
And you're done. It will work even when the recycling mechanism of the UITableView is in action when you scroll, which would be quite a pain to manage using other methods.
Take a look at SDWebImage. It's a really neat library to download images asynchronously and also caches them.

iPhone : UITableView reloadData timing problem

I'm encountering a common TableView data reloading problem. I've read many questions on the same subject but the problem was never exactly the same as mine...
I have a navigation based application. In the RootViewController's viewDidLoad method I make a request in order to get JSON data (articles). When the connection has finished loading I create custom Article objects for each entry. The Article class has an initWithDictionnary method which initializes the attributes of the object and most importantly creates a request to download an image. When the connection has finished loading I set the image attribute of the Article object.
The goal is to initialize the cell.imageView.image property with the downloaded image. At that point, you may have guessed what the problem is about.
Images are downloaded after the cell image is rendered so it stays empty until the cell is reloaded (if it gets out of the screen and then back in for example).
I guess I should call reloadData at a certain time but I don't know when. Ideally I would call it when all the cells are loaded but it doesn't seem possible.
I've tried a bunch of crazy things like waiting for a cell to load and the try to reload the previous one but it didn't work.
By reading Q&A out here I learned about Apple's LazyTableImage sample code but I don't understand all of it so I'm not sure I should/could use it.
Please ask me if you need more details.
Thanks in advance for any help.
You have to load the images Asynchronously. Keep in mind that your table data should contain a field per row specifying if the image was loaded so that (if true) you can skip loading and just display cached images.
Look at this question first: Load images async
There are about 10 good Lazy Loading Image UITableView tutorials. Pick one.
You'll get the hang of it by reviewing the tutorials after a while. Stick with it, it's an important concept, not only for this project, but for the rest of your programming career.
Lazy Loading Image UITableView Tutorials that'll make you smarter!

ScrollView as PhotoViewer, load Images only if needed

I would like to create a PhotoViewer for an iPhone.
For that, I already created a ScrollView with Paging enabled in that I add programmically add the UIImageViews. The problem I see is, that if I would have like 100 Images and I would all add to the ScrollView it would take alot of performance and memory.
How would you make it more performant? I thought about loading the Images of the following 2 pages and releasing the Images after the 2 Images before when scrolling through the pages.
I thought about creating a Subclass of UIScrollView and to name it UIPhotoScroller (or something like that). But I also want to show a UIView in the MainWindow with Information about the Images. Is it possible to make the UIView visible from the Subclass?
You really would help me with that. Thank you in advance :D
Create an NSCache.
When you need a particular image, try to get it from the cache. If it's not there, load it from disk and save it in the cache. The filename is a suitable key.
When you get a memory warning, tell the cache to empty itself.
The cache will release some of its entries periodically, depending on how it's configured. This is a good thing, but you might want to adjust it to have a particular total memory size. Tweak its parameters until it behaves like you want it to. To see your memory usage, use Instruments.
How about doing a UITableView with a single photo per cell. When a cell is being request by the data source, you display a spinner and have a queued NSOperation load the image and refresh the row when done.
You can control the amount of concurrent ops with a NSQueue, so you have complete control on performace/responsiveness. You can then remove old cached images when low on memory/paging, etc.
There are solutions to horizontal UITableView if you need horizontal scrolling.
Have you looked at the three20 library? There's an example of creating a great Photos app-like viewer of photos, and it's pretty easy to work with the three20 library.
Hope this helps!

Lazy load images in UITableViewCell

I have some 50 custom cells in my UITableView. I want to display an image and a label in the cells where I get the images from URLs.
I want to do a lazy load of images so the UI does not freeze up while the images are being loaded. I tried getting the images in separate threads but I have to load each image every time a cell becomes visible again (Otherwise reuse of cells shows old images)
Apps like Facebook load images only for cells currently visible and once the images are loaded, they are not loaded again. Can someone please tell me how to duplicate this behavior.
Thanks.
Edit
Trying to cache images in an NSMutableDictionary object creates problems when the user scrolls fast. I am getting images only when scrolling completely stops and clearing out the cache on memory warning. But the app invariably gets a memory warning (due to size of images being cached) and clears the cache before reloading. If scrolling is very fast, it crashes.
Any other suggestions are welcome
Loading the images on a background thread is still a good idea. If you didn't want to reload them each time, I'd suggest setting up an NSMutableDictionary and storing the images in there. You could use some unique identifier, like the row ID or even the name of the image, as the key for each image.
When loading a cell, you'd send an objectForKey: message to the NSMutableDictionary to retrieve the image for that particular cell (based on your unique key for it). If it returns nil, that means that the image is missing from the cache and you need your background image loading thread to go retrieve it. Otherwise, you will get back the appropriate image for your table cell to display. On a memory warning, you could clear out this cache of images with no adverse effects (aside from forcing them to be reloaded again on demand).
I have just successfully tackled the same problem by using a custom NSOperation to load the images in a queing fasion and stored them into a static NSMutableDictionary as a cache. Below is a link to the basis of the code I used to solve the problem.
Loading remote images for UITableViewCell
Best to read all the threads in the forum to help you understand what's actually going on.
lostInTransit,
I am having a similar problem and while exploring the many different possible solutions I found this blog post:
davidgolightly.blogspot.com/2009/02/asynchronous-image-caching-with-iphone.html
I would also suggest that you download the URLCache sample from the apple developer website:
developer.apple.com/iphone/prerelease/library/samplecode/URLCache/
And here is another post on the problem:
www.markj.net/iphone-asynchronous-table-image/
I'd love you to share your findings as well.
Lazy loading is like synchronous type request.. means wait for respond
ego image button is solution for that..
ego image button is asynchronous type request..don't wait for respond..just display data at a time....
you can download folder from github....
add to your project...
in xib..at image view ,change class to ego image button...
make object of it in m file...
you can use.....
For those who are interested, and are lazy like me, I would like to suggest an open source (MIT license) implementation of lazy/cached network of UIImageView images: SDWebImage
UITableView with image caching and resizing/setting in background thread:
http://blog.slaunchaman.com/2011/08/12/gcd-example-updated-now-with-more-speed/
This is Tutorial about NSOperation with example that show how to Lazy load images in UITableViewCell