How to show an activity indicator in SDWebImage

Question

Currently i am integrating SDWebImage in my project by following below things

1)#import "UIButton+WebCache.h"

2)[button setImageWithURL:url placeholderImage:[UIImage imageNamed:@"no_photo.png"]];

So it will show the list of image present in URL above the respective buttons.

But Now i want to show an activity indicator above button when the image is getting downloaded ,So how can i do this?

Answer 1

Works like a charm for me :

Swift 3:

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

Swift 4: (Edit : Updates)

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

Swift 5: SDWebImage (5.x.x)

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

Updates: For UIButton use this

yourButton.sd_setImage(with: URL(string: urlString), for: .normal)

Answer 2

Last solution

You can download UIActivityIndicator-for-SDWebImage, which is easiest way to add a UIActivityView to your SDWebImage view. Using CocoaPods, just add this line to your podfile:

pod 'UIActivityIndicator-for-SDWebImage'

You can use one of these lines depending on your preferences:

- (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;

Example of Use

Just import

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

and use this code

[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];

Answer 3

The best way I have found to do this is to use the SDWebImageManager class. Your view controller or some other class will then need to conform to the SDWebImageManagerDelegate protocol.

SDWebImageManager *manager = [SDWebImageManager sharedManager];
UIImage *cachedImage = [manager imageWithURL:url];

if (cachedImage) {
    [button setImage:cachedImage];
    // stop or remove your UIActivityIndicatorView here
}
else {
    [manager downloadWithURL:url delegate:self];
}

Once the image has been downloaded the delegate method will be called:

- (void)webImageManager:(SDWebImageManager *)imageManager didFinishWithImage:(UIImage *)image {
    [button setImage:image];
    // stop or remove your UIActivityIndicatorView here
}

There is also a delegate method for when an error occurs downloading an image

- (void)webImageManager:(SDWebImageManager *)imageManager didFailWithError:(NSError *)error {
    // Handle error here
}

If you have more than one button you may have problems determining which image belongs to which button after the image has downloaded. In this case you may need to have a button subclass which handles the download as above and then updates its own image.

Hope that helps.