在SDWebImage中显示活动指示器

Question

我正在使用SDWebView图像，我想在从远程获取图像时显示一个活动指示器作为占位符。

我尝试了Malek在这里的答案How to show an activity indicator in SDWebImage，但似乎

UIImage *cachedImage = [manager imageWithURL:url];

已过时。

有没有使用这个库的人能告诉我如何在加载图像时插入活动指示器？

编辑

按照Michael Frederick的指示，我最终得到了这段代码，一切都正常工作。

UIActivityIndicatorView *activityIndicator = [[[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleWhite] autorelease];
activityIndicator.hidesWhenStopped = YES;
activityIndicator.hidden = NO;
[activityIndicator startAnimating];
activityIndicator.center = CGPointMake(self.tipImage.frame.size.width /2, self.tipImage.frame.size.height/2);
[imageView setImageWithURL:[NSURL URLWithString:imageString]
          placeholderImage:nil options:SDWebImageProgressiveDownload
                   success:^(UIImage *image) { [activityIndicator stopAnimating];[activityIndicator removeFromSuperview]; }
                   failure:^(NSError *error) {  [activityIndicator stopAnimating];[activityIndicator removeFromSuperview]; }];

[imageView addSubview:activityIndicator];

- Phillip

---

你把占位图像放进去了吗？ - Shri

我选择只使用一个旋转器而不是图片，是的，它起作用了！ - Phillip

@Pheel 请不要在问题中添加答案，而是添加单独的回答（您可以回答自己的问题）。Stack Overflow 的格式是问题+答案（们）。 - Cristik

Answer 1

这个分支支持此功能。请查看差异。

但总的来说，您可以很容易地在不使用该分支的情况下完成它：

__block UIActivityIndicatorView *activityIndicator = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:activityStyle];
activityIndicator.center = imageView.center;
activityIndicator.hidesWhenStopped = YES;
[imageView setImageWithURL:[NSURL URLWithString:@"http://www.domain.com/path/to/image.jpg"]
               placeholderImage:[UIImage imageNamed:@"placeholder.png"]
                        success:^(UIImage *image) { [activityIndicator removeFromSuperview]; }
                        failure:^(NSError *error) { [activityIndicator removeFromSuperview]; }];

[imageView addSubview:activityIndicator];
[activityIndicator startAnimating];

- Michael Frederick

---

谢谢，我已经查看了它们，但有些不清楚：我应该使用带占位符还是不带占位符？因为那样不起作用！ 那段代码片段应该放在哪里？ - Phillip

如果您在“setImageWithURL”之后添加了“activityIndicator”，可能会使用占位符运行。代码片段应该放在您通常设置imageView图像的位置。 - Michael Frederick

很遗憾，它不能正常工作。它会加载占位符等内容，但不会加载活动指示器。 - Phillip

对于上面提到这个解决方案不起作用的评论：您需要在添加子视图后添加此行代码：[activityIndicator startAnimating]; - Allan Jiang

我们应该在什么时候停止动画？它正在工作，但在图像加载完成后也没有停止。 - Reaper

Answer 2

以下是操作步骤：

[imageView setIndicatorStyle:UIActivityIndicatorViewStyleWhite];
[imageView setShowActivityIndicatorView:true];
[imageView sd_setImageWithURL:[NSURL URLWithString:imageUrl] placeholderImage:[UIImage imageNamed:@"defaultl_image"]];

- Zaldy Bughaw

---

我确认这是目前最佳解决方案，因为主要仓库终于在此提交中添加了活动指示器功能：https://github.com/rs/SDWebImage/commit/c68d585e4957175402c521c52fc72fc932fec86d - AmineG

@SourabhSharma 这不是最好的方法，因为您需要编写三行代码来实现相同的功能。这也不是一个好的做法。 - Deepak Chaudhary

@DeepakChaudhary 好的，那么展示指标的最佳方式是什么？ - Sourabh Sharma

@SourabhSharma 创建一个imageView的扩展或者重写imageview的init方法，然后使用这两行代码。这样，你只需要为整个应用程序编写一次即可。 :) - Deepak Chaudhary

Answer 3

这是我的解决方案。在文件中：UIImageView+WebCache.m

找到那个方法并更改如下：

- (void)setImageWithURL:(NSURL *)url placeholderImage:(UIImage *)placeholder
{
    UIActivityIndicatorView *activity = [[UIActivityIndicatorView alloc]initWithActivityIndicatorStyle:(UIActivityIndicatorViewStyleGray)];
    [activity startAnimating];
    [activity setFrame:CGRectMake(self.frame.origin.x - 20, self.frame.origin.y - 10, self.frame.size.width, self.frame.size.height)];
    [self addSubview:activity];

    //[self setImageWithURL:url placeholderImage:placeholder options:0 progress:nil completed:nil];

    [self setImageWithURL:url
         placeholderImage:placeholder
                  options:0
                completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType)
     {
             [activity removeFromSuperview];
     }];
}

- Can Ürek

---

工作得非常完美。您还可以使用一个新名称添加它，保留原始的内容。 - Pelanes

Answer 4

最后的解决方案

您可以下载UIActivityIndicator-for-SDWebImage，这是将UIActivityView添加到您的SDWebImage视图中最简单的方法。使用CocoaPods，只需将此行添加到您的podfile中：

pod 'UIActivityIndicator-for-SDWebImage'

您可以根据自己的喜好使用其中一行：

- (void)setImageWithURL:(NSURL *)url usingActivityIndicatorStyle:(UIActivityIndicatorViewStyle)activityStyle;
- (void)setImageWithURL:(NSURL *)url placeholderImage:(UIImage *)placeholder usingActivityIndicatorStyle:(UIActivityIndicatorViewStyle)activityStyle;
- (void)setImageWithURL:(NSURL *)url placeholderImage:(UIImage *)placeholder options:(SDWebImageOptions)options usingActivityIndicatorStyle:(UIActivityIndicatorViewStyle)activityStyle;
- (void)setImageWithURL:(NSURL *)url completed:(SDWebImageCompletionBlock)completedBlock usingActivityIndicatorStyle:(UIActivityIndicatorViewStyle)activityStyle;
- (void)setImageWithURL:(NSURL *)url placeholderImage:(UIImage *)placeholder completed:(SDWebImageCompletionBlock)completedBlock usingActivityIndicatorStyle:(UIActivityIndicatorViewStyle)activityStyle;
- (void)setImageWithURL:(NSURL *)url placeholderImage:(UIImage *)placeholder options:(SDWebImageOptions)options completed:(SDWebImageCompletionBlock)completedBlock usingActivityIndicatorStyle:(UIActivityIndicatorViewStyle)activityStyle;
- (void)setImageWithURL:(NSURL *)url placeholderImage:(UIImage *)placeholder options:(SDWebImageOptions)options progress:(SDWebImageDownloaderProgressBlock)progressBlock completed:(SDWebImageCompletionBlock)completedBlock usingActivityIndicatorStyle:(UIActivityIndicatorViewStyle)activityStyle;

使用示例

只需导入

#import <UIActivityIndicator-for-SDWebImage/UIImageView+UIActivityIndicatorForSDWebImage.h>

并使用这段代码

[imageView setImageWithURL:[NSURL URLWithString:@"https://media.licdn.com/mpr/mpr/wc_200_200/p/1/005/07f/0a3/30cb8dd.jpg"] placeholderImage:[UIImage imageNamed:@"myImage.jpg"] usingActivityIndicatorStyle:UIActivityIndicatorViewStyleGray];

- E-Riddie

---

确实！早些时候还没有这个解决方案。但是对于新的解决方案加一分！ - Phillip

Answer 5

SDWebImage内置了一个完美工作的活动指示器。请尝试以下方法：

更新：SWIFT 5 SDWebImage 5.x.x

        imgView.sd_imageIndicator = SDWebImageActivityIndicator.gray
        imgView.sd_setImage(with: url, placeholderImage: UIImage(named: "placeholder"))

Swift 3：

imgView.setShowActivityIndicator(true)
imgView.setIndicatorStyle(.gray)
imgView.sd_setImage(with: URL(string: urlString), placeholderImage: UIImage(named: "placeholder"))

- Ankit Kumar Gupta

Answer 6

针对 Swift 5.0 和 SDWebImage 5.0：

替换为

imageView.sd_setShowActivityIndicatorView(true)
imageView.sd_setIndicatorStyle(.gray)

通过

imageView.sd_imageIndicator = SDWebImageActivityIndicator.gray

- BSK-Team

Answer 7

上面的代码略有问题。行“activityIndicator.center = imageView.center”不能给您正确的坐标以居中进度视图。对我来说，它正在显示单元格下方的指示器。

请注意-我正在使用最新版本的SDWebImage代码，因此方法略有不同。我还使用UIButton作为imageView。

试试这个：

NSURL *url = [NSURL URLWithString:@"www.someimageurl.com"];
__block UIActivityIndicatorView *activityIndicator = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleGray];
activityIndicator.frame = cell.imageView.bounds;
[cell.imageView addSubview:activityIndicator];
[activityIndicator startAnimating];
[cell.imageView setImageWithURL:url forState:UIControlStateNormal completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType) {
    [activityIndicator removeFromSuperview];
}];

- JimmyJammed

---

我一直在使用和你相同的代码，但是活动指示器会显示一秒钟，然后立即消失。我已经注释掉了删除它的那行代码...无论我尝试什么都无法让它停留。它只是出现然后立刻消失。 :( - Hackmodford

Answer 8

我相信使用最新版本的sdwebimage，这是一种更好的方法。

[self.customImageView setImageWithURL:imageURL
                             placeholderImage:nil
                                      options:nil
                                     progress:^(NSUInteger receivedSize, long long expectedSize) { [self.activityIndicator startAnimating]; }
                                    completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType) { [self.activityIndicator stopAnimating]; }];

注意：如果您没有设置属性，显然self.activityindicator将无法工作。

我会使用Michael Frederick的示例来创建activityindicator。

- Hackmodford

Answer 9

同上述代码的 SWIFT 4 版本：

let activityIndicator = UIActivityIndicatorView.init(activityIndicatorStyle: UIActivityIndicatorViewStyle.gray)
    activityIndicator.center = addImage.center
    activityIndicator.hidesWhenStopped = true

    addImage.sd_setImage(with: URL(string: feed.image), completed: { (image: UIImage?, error: Error?, cacheType: SDImageCacheType, imageURL: URL?) in
        activityIndicator.removeFromSuperview()
    })

    addImage.addSubview(activityIndicator)
    activityIndicator.startAnimating()

- Ignacio Oroná

Answer 10

SdWebImage 5.0

YOUR_IMAGEVIEW.sd_imageIndicator = SDWebImageActivityIndicator.gray

- Ahmadreza