在 ios 应用程序上缓存图像的最佳方法？

Best way to cache images on ios app?

提问by Sti

Shortly, I have an NSDictionarywith urls for images that I need to show in my UITableView. Each cell has a title and an image. I had successfully made this happen, although the scrolling was lagging, as it seemed like the cells downloaded their image every time they came into the screen. I searched for a bit, and found SDWebImageon github. This made the scroll-lagg go away. I am not completely sure what it did, but I believed it did some caching. But! Every time I open the app for the first time, I see NO images, and I have to scroll down, and back up for them to arrive. And if I exit the app with home-button, and open again, then it seemes like the caching is working, because the images on the screen are visible, however, if I scroll one cell down, then the next cell has no image. Until i scroll past it and back up, or if I click on it. Is this how caching is supposed to work? Or what is the best way to cache images downloaded from the web? The images are being updated rarily, so I was close to just import them to the project, but I like to have the possibility to update images without uploading an update..

很快，我有一个NSDictionary带有 url 的图像，我需要在我的UITableView. 每个单元格都有一个标题和一个图像。我已经成功地做到了这一点，尽管滚动滞后，因为似乎细胞每次进入屏幕时都会下载它们的图像。我搜索了一下，发现SDWebImage在github上。这使得滚动滞后消失了。我不完全确定它做了什么，但我相信它做了一些缓存。但！每次我第一次打开应用程序时，我都看不到图像，我必须向下滚动并备份才能到达。如果我用主页按钮退出应用程序，然后再次打开，那么缓存似乎正在工作，因为屏幕上的图像是可见的，但是，如果我向下滚动一个单元格，则下一个单元格没有图像。直到我滚动过去并备份，或者如果我点击它。这是缓存应该如何工作吗？或什么是从网上下载的缓存图片的最佳方式？图像很少更新，所以我几乎只是将它们导入到项目中，但我喜欢有可能在不上传更新的情况下更新图像。

Is it impossible to load all the images for the whole tableview form the cache(given that there is something in the cache) at launch? Is that why I sometimes see cells without images?

是否不可能在启动时从缓存中加载整个 tableview 的所有图像（假设缓存中有东西）？这就是为什么我有时会看到没有图像的细胞？

And yes, I'm having a hard time understanding what cache is.

是的，我有一个很难理解的缓存是什么。

--EDIT--

- 编辑 -

I tried this with only images of the same size (500x150), and the aspect-error is gone, however when I scroll up or down, there are images on all cells, but at first they are wrong. After the cell has been in the view for some milliseconds, the right image appears. This is amazingly annoying, but maybe how it has to be?.. It seemes like it chooses the wrong index from the cache at first. If I scroll slow, then I can see the images blink from wrong image to the correct one. If I scroll fast, then I believe the wrong images are visible at all times, but I can't tell due to the fast scrolling. When the fast scrolling slows down and eventually stops, the wrong images still appear, but immediately after it stops scrolling, it updates to the right images. I also have a custom UITableViewCellclass, but I haven't made any big changes.. I haven't gone through my code very much yet, but I can't think of what may be wrong.. Maybe I have something in the wrong order.. I have programmed much in java, c#, php etc, but I'm having a hard time understanding Objective-c, with all the .hand .m... I have also `

我只用相同大小（500x150）的图像尝试了这个，并且方面错误消失了，但是当我向上或向下滚动时，所有单元格上都有图像，但起初它们是错误的。单元格在视图中停留几毫秒后，将显示正确的图像。这非常令人讨厌，但也许它必须是这样？.. 似乎它首先从缓存中选择了错误的索引。如果我滚动缓慢，那么我可以看到图像从错误的图像闪烁到正确的图像。如果我快速滚动，那么我相信错误的图像始终可见，但由于快速滚动，我无法分辨。当快速滚动变慢并最终停止时，错误的图像仍然出现，但在停止滚动后立即更新为正确的图像。我也有一个习惯UITableViewCell类，但我没有做任何大的改变..我还没有仔细阅读我的代码，但我想不出可能有什么问题..也许我的顺序有误..我有多用Java，C＃，PHP等程序，但我有一个很难理解的Objective-C，所有的.h和.m...我也有`

@interface FirstViewController : UITableViewController{

/**/
NSCache *_imageCache;
}

(among other variables) in FirstViewController.h. Is this not correct?

（以及其他变量）在FirstViewController.h. 这不正确吗？

Here's my cellForRowAtIndexPath.

这是我的cellForRowAtIndexPath。

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *CellIdentifier = @"hallo";
CustomCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];

if (cell == nil)
{
    cell = [[CustomCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];
}

NSMutableArray *marr = [hallo objectAtIndex:indexPath.section];
NSDictionary *dict = [marr objectAtIndex:indexPath.row];

NSString* imageName = [dict objectForKey:@"Image"];
//NSLog(@"url: %@", imageURL);

UIImage *image = [_imageCache objectForKey:imageName];

if(image)
{
    cell.imageView.image = image;
}
else
{
    dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{

        NSString* imageURLString = [NSString stringWithFormat:@"example.com/%@", imageName];
        NSURL *imageURL = [NSURL URLWithString:imageURLString];
        UIImage *image = [[UIImage alloc] initWithData:[NSData dataWithContentsOfURL:imageURL]];

        if(image)
        {
            dispatch_async(dispatch_get_main_queue(), ^{
                CustomCell *cell =(CustomCell*)[self.tableView cellForRowAtIndexPath:indexPath];
                if(cell)
                {
                    cell.imageView.image = image;
                }
            });
            [_imageCache setObject:image forKey:imageName];
        }
    });
}

cell.textLabel.text = [dict objectForKey:@"Name"];

return cell;
}

回答by Caleb

Caching just means keeping a copy of the data that you need so that you don't have to load it from some slower source. For example, microprocessors often have cache memory where they keep copies of data so that they don't have to access RAM, which is a lot slower. Hard disks often have memory caches from which the file system can get much quicker access to blocks of data that have been accessed recently.

缓存只是意味着保留您需要的数据的副本，这样您就不必从某些较慢的源加载它。例如，微处理器通常有高速缓存，它们可以在其中保存数据的副本，这样它们就不必访问速度较慢的 RAM。硬盘通常具有内存缓存，文件系统可以从中更快地访问最近访问过的数据块。

Similarly, if your app loads a lot of images from the network, it may be in your interest to cache them on your device instead of downloading them every time you need them. There are lots of ways to do that -- it sounds like you already found one. You might want to store the images you download in your app's /Library/Caches directory, especially if you don't expect them to change. Loading the images from secondary storage will be much, much quicker than loading them over the network.

同样，如果您的应用程序从网络加载大量图像，则将它们缓存在您的设备上而不是每次需要时都下载它们可能符合您的利益。有很多方法可以做到这一点——听起来你已经找到了一种。您可能希望将下载的图像存储在应用程序的 /Library/Caches 目录中，尤其是在您不希望它们发生变化的情况下。从二级存储加载图像比通过网络加载要快得多。

You might also be interested in the little-known NSCacheclass for keeping the images you need in memory. NSCache works like a dictionary, but when memory gets tight it'll start releasing some of its contents. You can check the cache for a given image first, and if you don't find it there you can then look in your caches directory, and if you don't find it there you can download it. None of this will speed up image loading on your app the first time you run it, but once your app has downloaded most of what it needs it'll be much more responsive.

您可能还对鲜为人知的NSCache类感兴趣，用于将您需要的图像保存在内存中。NSCache 像字典一样工作，但是当内存紧张时它会开始释放它的一些内容。您可以先检查给定图像的缓存，如果在那里找不到它，则可以查看缓存目录，如果在那里找不到，则可以下载它。在您第一次运行应用程序时，这些都不会加快图像加载速度，但是一旦您的应用程序下载了它需要的大部分内容，它的响应速度就会快得多。

回答by Rob

I think Caleb answered the caching question well. I was just going to touch upon the process for updating your UI as you retrieve images, e.g. assuming you have a NSCachefor your images called _imageCache:

我认为 Caleb 很好地回答了缓存问题。我只是想谈谈在检索图像时更新 UI 的过程，例如，假设您NSCache的图像有一个名为_imageCache：

First, define an operation queue property for the tableview:

首先，为 tableview 定义一个操作队列属性：

@property (nonatomic, strong) NSOperationQueue *queue;

Then in viewDidLoad, initialize this:

然后在viewDidLoad，初始化这个：

self.queue = [[NSOperationQueue alloc] init];
self.queue.maxConcurrentOperationCount = 4;

And then in cellForRowAtIndexPath, you could then:

然后在cellForRowAtIndexPath，你可以：

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *CellIdentifier = @"ilvcCell";
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];

    // set the various cell properties

    // now update the cell image

    NSString *imagename = [self imageFilename:indexPath]; // the name of the image being retrieved

    UIImage *image = [_imageCache objectForKey:imagename];

    if (image)
    {
        // if we have an cachedImage sitting in memory already, then use it

        cell.imageView.image = image;
    }
    else
    {
        cell.imageView.image = [UIImage imageNamed:@"blank_cell_image.png"];

        // the get the image in the background

        [self.queue addOperationWithBlock:^{

            // get the UIImage

            UIImage *image = [self getImage:imagename];

            // if we found it, then update UI

            if (image)
            {
                [[NSOperationQueue mainQueue] addOperationWithBlock:^{
                    // if the cell is visible, then set the image

                    UITableViewCell *cell = [self.tableView cellForRowAtIndexPath:indexPath];
                    if (cell)
                        cell.imageView.image = image;
                }];

                [_imageCache setObject:image forKey:imagename];
            }
        }];
    }

    return cell;
}

I only mention this as I've seen a few code samples floating around on SO recently that use GCD to update the appropriate UIImageViewimageproperty, but in the process of dispatching the UI update back to the main queue, they employ curious techniques (e.g., reloading the cell or table, just updating the image property of the existing cellobject returned at the top of the tableView:cellForRowAtIndexPath(which is a problem if the row has scrolled off the screen and the cell has been dequeued and is being reused for a new row), etc.). By using cellForRowAtIndexPath(not to be confused with tableView:cellForRowAtIndexPath), you can determine if the cell is still visible and/or if it may have scrolled off and been dequeued and reused.

我只是提到这一点，因为我最近在 SO 上看到了一些使用 GCD 更新适当UIImageViewimage属性的代码示例，但是在将 UI 更新分派回主队列的过程中，他们采用了奇怪的技术（例如，重新加载单元格或表格，只需更新cell在顶部返回的现有对象的图像属性tableView:cellForRowAtIndexPath（如果行已滚出屏幕并且单元格已出列并重新用于新行，则会出现问题）等.) 通过使用cellForRowAtIndexPath（不要与 混淆tableView:cellForRowAtIndexPath），您可以确定单元格是否仍然可见和/或它是否可能已滚动并已出列和重用。

回答by Matt Perejda

The simplest solution is to go with something heavily used that has been stress tested.

最简单的解决方案是使用经过压力测试的大量使用的东西。

SDWebImage is a powerful tool that helped me solve a similar problem and can easily be installed w/ cocoa pods. In podfile:

SDWebImage 是一个强大的工具，它帮助我解决了类似的问题，并且可以很容易地通过可可豆荚安装。在 podfile 中：

platform :ios, '6.1'
pod 'SDWebImage', '~>3.6'

Setup cache:

设置缓存：

SDImageCache *imageCache = [[SDImageCache alloc] initWithNamespace:@"myNamespace"];
[imageCache queryDiskCacheForKey:myCacheKey done:^(UIImage *image)
{
    // image is not nil if image was found
}];

Cache image:

缓存图片：

[[SDImageCache sharedImageCache] storeImage:myImage forKey:myCacheKey];

https://github.com/rs/SDWebImage

https://github.com/rs/SDWebImage

回答by MaeSTRo

I think will be better for you user something like DLImageLoader. More info -> https://github.com/AndreyLunevich/DLImageLoader-iOS

我认为像 DLImageLoader 这样的用户会更好。更多信息 -> https://github.com/AndreyLunevich/DLImageLoader-iOS

[[DLImageLoader sharedInstance] loadImageFromUrl:@"image_url_here"
                                   completed:^(NSError *error, UIImage *image) {
                                        if (error == nil) {
                                            imageView.image = image;
                                        } else {
                                            // if we got an error when load an image
                                        }
                                   }];

回答by Swasidhant

For the part of the question about wrong images, it's because of the reuse of cells. Reuse of cells means that the existing cells, which go out of view (for example, the cells which go out of the screen in the top when you scroll towards the bottom are the ones coming back again from the bottom.) And so you get incorrect images. But once the cell shows up, the code for fetching the proper image executes and you get the proper images.

对于错误图像的部分问题，这是因为单元格的重用。单元格的重用意味着现有的单元格不在视图中（例如，当您向底部滚动时，在顶部离开屏幕的单元格是从底部再次返回的单元格。）所以你得到不正确的图像。但是一旦单元格出现，获取正确图像的代码就会执行，你就会得到正确的图像。

You can use a placeholder in 'prepareForReuse' method of the cell. This function is mostly used when you need to reset the values when the cell is brought up for reuse. Setting a placeholder here will make sure you won't get any incorrect images.

您可以在单元格的“prepareForReuse”方法中使用占位符。当您需要在单元格重新使用时重置值时，通常会使用此功能。在此处设置占位符将确保您不会得到任何不正确的图像。

回答by Kausik Jati

////.h file

#import <UIKit/UIKit.h>

@interface UIImageView (KJ_Imageview_WebCache)


-(void)loadImageUsingUrlString :(NSString *)urlString placeholder :(UIImage *)placeholder_image;

@end

//.m file


#import "UIImageView+KJ_Imageview_WebCache.h"


@implementation UIImageView (KJ_Imageview_WebCache)




-(void)loadImageUsingUrlString :(NSString *)urlString placeholder :(UIImage *)placeholder_image
{




    NSString *imageUrlString = urlString;
    NSURL *url = [NSURL URLWithString:urlString];



    NSArray *paths = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory,     NSUserDomainMask, YES);
    NSString *documentsDirectory = [paths objectAtIndex:0];
    NSString *getImagePath = [documentsDirectory stringByAppendingPathComponent:[self tream_char:urlString]];

    NSLog(@"getImagePath--->%@",getImagePath);

    UIImage *customImage = [UIImage imageWithContentsOfFile:getImagePath];




    if (customImage)
    {
        self.image = customImage;


        return;
    }
    else
    {
         self.image=placeholder_image;
    }


    NSURLSession *session = [NSURLSession sharedSession];
    NSURLSessionDataTask *uploadTask = [session dataTaskWithURL:url completionHandler:^(NSData * _Nullable data, NSURLResponse * _Nullable response, NSError * _Nullable error) {


        if (error)
        {
            NSLog(@"%@",[error localizedDescription]);

           self.image=placeholder_image;

            return ;
        }

        dispatch_async(dispatch_get_main_queue(), ^{


            UIImage *imageToCache = [UIImage imageWithData:data];



            if (imageUrlString == urlString)
            {

                self.image = imageToCache;
            }



            [self saveImage:data ImageString:[self tream_char:urlString]];

        });




    }];

    [uploadTask resume];



}


-(NSString *)tream_char :(NSString *)string
{
    NSString *unfilteredString =string;

    NSCharacterSet *notAllowedChars = [[NSCharacterSet characterSetWithCharactersInString:@"!@#$%^&*()_+|abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890"] invertedSet];
    NSString *resultString = [[unfilteredString componentsSeparatedByCharactersInSet:notAllowedChars] componentsJoinedByString:@""];
    NSLog (@"Result: %@", resultString);



    return resultString;

}

-(void)saveImage : (NSData *)Imagedata ImageString : (NSString *)imageString
{

    NSArray* documentDirectories = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask,YES);

    NSString* documentDirectory = [documentDirectories objectAtIndex:0];
    NSString* documentDirectoryFilename = [documentDirectory stringByAppendingPathComponent:imageString];




    if (![Imagedata writeToFile:documentDirectoryFilename atomically:NO])
    {
        NSLog((@"Failed to cache image data to disk"));
    }
    else
    {
        NSLog(@"the cachedImagedPath is %@",documentDirectoryFilename);
    }

}

@end


/// call 

 [cell.ProductImage loadImageUsingUrlString:[[ArrProductList objectAtIndex:indexPath.row] valueForKey:@"product_image"] placeholder:[UIImage imageNamed:@"app_placeholder"]];

回答by tsuz

Caching images can be done as simply as this.

缓存图像可以像这样简单地完成。

ImageService.m

图像服务

@implementation ImageService{
    NSCache * Cache;
}

const NSString * imageCacheKeyPrefix = @"Image-";

-(id) init {
    self = [super init];
    if(self) {
        Cache = [[NSCache alloc] init];
    }
    return self;
}

/** 
 * Get Image from cache first and if not then get from server
 * 
 **/

- (void) getImage: (NSString *) key
        imagePath: (NSString *) imagePath
       completion: (void (^)(UIImage * image)) handler
    {
    UIImage * image = [Cache objectForKey: key];

    if( ! image || imagePath == nil || ! [imagePath length])
    {
        image = NOIMAGE;  // Macro (UIImage*) for no image 

        [Cache setObject:image forKey: key];

        dispatch_async(dispatch_get_main_queue(), ^(void){
            handler(image);
        });
    }
    else
    {
        dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_HIGH,0ul ),^(void){

            UIImage * image = [UIImage imageWithData:[NSData dataWithContentsOfURL:[NSURL URLWithString:[imagePath stringByAddingPercentEscapesUsingEncoding:NSUTF8StringEncoding]]]];

            if( !image)
            {
                image = NOIMAGE;
            }

            [Cache setObject:image forKey: key];

            dispatch_async(dispatch_get_main_queue(), ^(void){
                handler(image);
            });
        });
    }
}


- (void) getUserImage: (NSString *) userId
           completion: (void (^)(UIImage * image)) handler
{
    [self getImage: [NSString stringWithFormat: @"%@user-%@", imageCacheKeyPrefix, userId]
         imagePath: [NSString stringWithFormat: @"http://graph.facebook.com/%@/picture?type=square", userId]
        completion: handler];
}

SomeViewController.m

SomeViewController.m

    [imageService getUserImage: userId
                    completion: ^(UIImage *image) {
            annotationImage.image = image;
    }];