SDWebImage/README.md

256 lines
11 KiB
Markdown
Raw Normal View History

Web Image
=========
2009-09-20 02:45:42 +08:00
This library provides a category for UIImageVIew with support for remote images coming from the web.
2009-09-20 02:45:42 +08:00
2009-09-20 03:14:40 +08:00
It provides:
- An UIImageView category adding web image and cache management to the Cocoa Touch framework
- An asynchronous image downloader
- An asynchronous memory + disk image caching with automatic cache expiration handling
2011-10-20 21:03:19 +08:00
- A guarantee that the same URL won't be downloaded several times
- A guarantee that bogus URLs won't be retried again and again
- Performances!
2009-09-20 03:14:40 +08:00
2009-09-21 11:34:04 +08:00
Motivation
----------
As a dummy Objective-C developer working on my first iPhone application for my company
([Dailymotion][]), I've been very frustrated by the lack of support in the Cocoa Touch framework for
2011-10-20 21:03:19 +08:00
UITableView with remote images. After some Googling, I found lot of forums and blogs coming up with
their solution, most of the time based on asynchronous usage with NSURLConnection, but none provided
a simple library doing the work of async image grabbing + caching for you.
2011-10-20 21:03:19 +08:00
Actually there is one in the famous [Three20][] framework by [Joe Hewitt][], but it's a massive
and undocumented piece of code. You can't import just the the libraries you want without taking the
whole framework (damn #import "TTGlobal.h"). Anyway, the [Three20][] implementation is based on
2011-10-20 21:03:19 +08:00
NSURLConnection, and I soon discovered this solution wasn't ideal. Keep reading to find out why.
2011-10-20 21:03:19 +08:00
As a hurried beginner in iPhone development, I couldn't attempt to implement my own async image
grabber with caching support as my first steps in this new world. Thus, I asked for help from my good
friend Sebastien Flory ([Fraggle][]), who was working on his great iPhone game ([Urban Rivals][], a
2011-10-20 21:03:19 +08:00
future app-store hit) for almost a year. He spent quite an amount of time implementing the very
same solution for his needs, and was kind enough to give me his implementation for my own use. This
worked quite well and allowed me to concentrate on other parts of my application. But when I started
to compare my application with its direct competitor - the built-in Youtube application - I was very
unhappy with the loading speed of the images. After some network sniffing, I found that every HTTP
2011-10-20 21:03:19 +08:00
requests for my images was 10 times slower than Youtube's... On my own network, Youtube was 10
time faster than my own servers... WTF??
2011-10-20 21:03:19 +08:00
In fact, my servers were fine but a lot of latency was added to the requests, certainly because my
application wasn't responsive enough to handle the requests at full speed. Right then, I
understood something important, asynchronous NSURLConnections are tied to the main runloop in the
NSEventTrackingRunLoopMode. As explained in the documentation, this runloop mode is affected by
UI events:
> Cocoa uses this mode to restrict incoming events during mouse-dragging loops and other sorts of
> user interface tracking loops.
2011-10-20 21:03:19 +08:00
A simple test to recognize an application using NSURLConnection in its default mode to load
remote images is to scroll the UITableView with your finger to disclose an unloaded image, and to
keep your finger pressed on the screen. If the image doesn't load until you release you finger,
you've got one (try with the Facebook app for instance). It took me quite some time to understand
the reason for this lagging issue. Actually I first used NSOperation to workaround this issue.
2011-10-20 21:03:19 +08:00
This technique combined with an image cache instantly gave a lot of responsiveness to my app.
I thought this library could benefit other Cocoa Touch applications so I open-sourced it.
2009-09-21 11:34:04 +08:00
2009-09-20 03:14:40 +08:00
How To Use It
-------------
API documentation is available at [http://hackemist.com/SDWebImage/doc/](http://hackemist.com/SDWebImage/doc/)
### Using UIImageView+WebCache category with UITableView
Just #import the UIImageView+WebCache.h header, and call the setImageWithURL:placeholderImage:
method from the tableView:cellForRowAtIndexPath: UITableViewDataSource method. Everything will be
handled for you, from async downloads to caching management.
2012-05-09 17:33:38 +08:00
```objective-c
#import <SDWebImage/UIImageView+WebCache.h>
2012-05-09 17:33:38 +08:00
...
2012-05-09 17:33:38 +08:00
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *MyIdentifier = @"MyIdentifier";
2012-05-09 17:33:38 +08:00
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:MyIdentifier];
2012-05-09 17:33:38 +08:00
if (cell == nil)
{
cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault
reuseIdentifier:MyIdentifier] autorelease];
}
2012-05-09 17:33:38 +08:00
// Here we use the new provided setImageWithURL: method to load the web image
[cell.imageView setImageWithURL:[NSURL URLWithString:@"http://www.domain.com/path/to/image.jpg"]
placeholderImage:[UIImage imageNamed:@"placeholder.png"]];
2012-05-09 17:33:38 +08:00
cell.textLabel.text = @"My Text";
return cell;
}
```
### Using blocks
If your project's deployement target is set to iOS 4+, you may want to use the success/failure blocks to be
notified when image have been retrieved from cache.
2012-05-09 17:33:38 +08:00
```objective-c
// Here we use the new provided setImageWithURL: method to load the web image
[cell.imageView setImageWithURL:[NSURL URLWithString:@"http://www.domain.com/path/to/image.jpg"]
placeholderImage:[UIImage imageNamed:@"placeholder.png"]
success:^(UIImage *image, BOOL cached) {... success code here ...}
2012-05-09 17:33:38 +08:00
failure:^(NSError *error) {... failure code here ...}];
];
2012-05-09 17:33:38 +08:00
```
Note: neither your success nor failure block will be call if your image request is canceled before completion.
### Using SDWebImageManager
The SDWebImageManager is the class behind the UIImageView+WebCache category. It ties the
2011-10-20 21:03:19 +08:00
asynchronous downloader with the image cache store. You can use this class directly to benefit
from web image downloading with caching in another context than a UIView (ie: with Cocoa).
Here is a simple example of how to use SDWebImageManager:
2012-05-09 17:33:38 +08:00
```objective-c
SDWebImageManager *manager = [SDWebImageManager sharedManager];
2012-05-10 20:07:38 +08:00
[manager downloadWithURL:imageURL
delegate:self
options:0
success:^(UIImage *image, BOOL cached)
2012-05-10 20:07:38 +08:00
{
// do something with image
}
failure:nil];
2012-05-09 17:33:38 +08:00
```
### Using Asynchronous Image Downloader Independently
It is possible to use the async image downloader independently. You just have to create an instance
of SDWebImageDownloader using its convenience constructor downloaderWithURL:delegate:.
2012-05-09 17:33:38 +08:00
```objective-c
downloader = [SDWebImageDownloader downloaderWithURL:url delegate:self];
```
The download will start immediately and the imageDownloader:didFinishWithImage: method from the
SDWebImageDownloaderDelegate protocol will be called as soon as the download of image is completed.
### Using Asynchronous Image Caching Independently
It is also possible to use the NSOperation based image cache store independently. SDImageCache
maintains a memory cache and an optional disk cache. Disk cache write operations are performed
asynchronous so it doesn't add unnecessary latency to the UI.
The SDImageCache class provides a singleton instance for convenience but you can create your own
2011-10-20 21:03:19 +08:00
instance if you want to create separated cache namespace.
To lookup the cache, you use the imageForKey: method. If the method returns nil, it means the cache
2011-10-20 21:03:19 +08:00
doesn't currently own the image. You are thus responsible for generating and caching it. The cache
key is an application unique identifier for the image to cache. It is generally the absolute URL of
the image.
2012-05-09 17:33:38 +08:00
```objective-c
UIImage *myCachedImage = [[SDImageCache sharedImageCache] imageFromKey:myCacheKey];
```
By default SDImageCache will lookup the disk cache if an image can't be found in the memory cache.
You can prevent this from happening by calling the alternative method imageFromKey:fromDisk: with a
negative second argument.
To store an image into the cache, you use the storeImage:forKey: method:
2012-05-09 17:33:38 +08:00
```objective-c
[[SDImageCache sharedImageCache] storeImage:myImage forKey:myCacheKey];
```
2009-09-20 03:14:40 +08:00
By default, the image will be stored in memory cache as well as on disk cache (asynchronously). If
you want only the memory cache, use the alternative method storeImage:forKey:toDisk: with a negative
third argument.
2009-09-20 03:14:40 +08:00
### Using cache key filter
Sometime, you may not want to use the image URL as cache key because part of the URL is dynamic
(i.e.: for access control purpose). SDWebImageManager provides a way to set a cache key filter that
takes the NSURL as input, and output a cache key NSString.
The following example sets a filter in the application delegate that will remove any query-string from
the URL before to use it as a cache key:
2012-05-09 17:33:38 +08:00
```objective-c
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
[[SDWebImageManager sharedManager] setCacheKeyFilter:^(NSURL *url)
{
2012-05-09 17:33:38 +08:00
url = [[[NSURL alloc] initWithScheme:url.scheme host:url.host path:url.path] autorelease];
return [url absoluteString];
}];
// Your app init code...
return YES;
}
```
2012-03-22 17:33:07 +08:00
Common Problems
---------------
### Using dynamic image size with UITableViewCell
UITableView determins the size of the image by the first image set for a cell. If your remote images
don't have the same size as your placeholder image, you may experience strange anamorphic scaling issue.
The following article gives a way to workaround this issue:
[http://www.wrichards.com/blog/2011/11/sdwebimage-fixed-width-cell-images/](http://www.wrichards.com/blog/2011/11/sdwebimage-fixed-width-cell-images/)
2012-03-11 00:40:02 +08:00
Automatic Reference Counting (ARC)
----------------------------------
You can use either style in your Cocoa project. SDWebImage Will figure out which you are using at compile
time and do the right thing.
Installation
------------
2012-04-13 06:09:47 +08:00
There are two ways to use this in your project: copy all the files into your project, or import the project as a static library.
### Add the SDWebImage project to your project
2012-10-19 19:34:17 +08:00
- Download and unzip the last version of the framework from the [download page](https://github.com/rs/SDWebImage/downloads)
- Right-click on the project navigator and select "Add Files to "Your Project":
- In the dialog, select SDWebImage.framework:
- Check the "Copy items into destination group's folder (if needed)" checkbox
### Add build target dependencies
2012-10-19 19:34:17 +08:00
- In you application project apps target settings, find the "Build Phases" section and open the "Link Binary With Libraries" block:
- Click the "+" button again and select the "ImageIO.framework", this is needed by the progressive download feature:
### Import headers in your source files
2012-09-02 18:40:21 +08:00
In the source files where you need to use the library, import the header file:
```objective-c
#import <SDWebImage/UIImageView+WebCache.h>
```
### Build Project
At this point your workspace should build without error. If you are having problem, post to the Issue and the
community can help you solve it.
2009-09-20 03:14:40 +08:00
Future Enhancements
-------------------
2009-09-21 09:43:43 +08:00
- LRU memory cache cleanup instead of reset on memory warning
[Dailymotion]: http://www.dailymotion.com
[Fraggle]: http://fraggle.squarespace.com
[Urban Rivals]: http://fraggle.squarespace.com/blog/2009/9/15/almost-done-here-is-urban-rivals-iphone-trailer.html
[Three20]: http://groups.google.com/group/three20
[Joe Hewitt]: http://www.joehewitt.com
[tutorial]: http://blog.carbonfive.com/2011/04/04/using-open-source-static-libraries-in-xcode-4