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?

Phenylketonuria

I believe this can now be achieved using the solution I have provided. Please do have a look. – Backflow

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)

Backflow

This should be the selected answer. Truly its a charm – Bethany

Do I need to call stop animating or something similar when the image is loaded into the imageview? – Baier

No, as soon as the image is fetched your indicator will hide automatically. Kindly upvote if this solves your issue. – Backflow

in Swift 4 actually is imgView.sd_setShowActivityIndicatorView(true) imgView.sd_setIndicatorStyle(.gray) – Discomfiture

Man, you are awesome, I want to upvote you 100 times if possible, to tell the questioner that this is the answer – Patras

@NaveedAhmad Thanks bro. Keep sharing and helping the community. – Backflow

@AnkitKumarGupta I am not able to get the method name in objective c library. There is no method called setActivityInacator – Takeover

Seem I have to add imageView.sd_addActivityIndicator() as well – Fuliginous

@TaiLe For me it works fine without it. I am using on tableview cell also. – Backflow

doesn't work with button's imageView. instead you should use button.sd_setImage(with: url, for: .normal), so directly to button. – Cauline

Answer 2

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.

Thiazole

Answer 3

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

Deist

Answer 4

the best way is to add the activityIndicator in all "setImage" functions in UIImageView+WebCache.m, after that you remove it in "webImageManager:r didFinishWithImage:" , i test it in device and it work smoothly, her's an example :

  - (void)setImageWithURL:(NSURL *)url placeholderImage:(UIImage *)placeholder
 {


UIActivityIndicatorView *activity = [[UIActivityIndicatorView alloc]initWithActivityIndicatorStyle:(UIActivityIndicatorViewStyleWhiteLarge)];
[activity startAnimating];
[activity setCenter:self.center];
[self addSubview:activity];
[activity release];



SDWebImageManager *manager = [SDWebImageManager sharedManager];

UIImage *cachedImage = [manager imageWithURL:url];

if (cachedImage)
{
    // the image is cached -> remove activityIndicator from view
    for (UIView *v in [self subviews])
    {
        if ([v isKindOfClass:[UIActivityIndicatorView class]])
        {
            [activity removeFromSuperview];
        }
    }
}

[self setImageWithURL:url placeholderImage:placeholder options:0];
}

and you remove it with a fade animation ;) :

 - (void)webImageManager:(SDWebImageManager *)imageManager didFinishWithImage:(UIImage *)image
{ 

for (UIView *v in [self subviews])
{
    if ([v isKindOfClass:[UIActivityIndicatorView class]])
    {
       // NSLog(@"-didFinishWithImage-");
        [((UIActivityIndicatorView*)v) stopAnimating];
        [v removeFromSuperview];
    }
}


[UIView beginAnimations:@"fadeAnimation" context:NULL]; 
[UIView setAnimationDuration:0.9];
self.alpha = 0;
self.image = image;
self.alpha=1;
//[UIView setAnimationTransition:UIViewAnimationTransitionFlipFromLeft forView:self cache:YES]; 
[UIView commitAnimations];

 }

Comprehensive

It's Crashing at my end, giving assertion failure error while loading image. – Postulate

i just download and use the last version in github, and it work fine (ios 5.1). and it seems that imageWithURL: is deprecated, ill try to work in a new version for this, but you have to give us some code ( are you using an UIImageView gategorie ? ) – Comprehensive

whenever i am using your code to add activity indicator it will provide me assertion error but without activity indicator other animation code will work like charm. if you try and tell me about new version it will be good for me. – Postulate

Answer 5

For swift 5

//pass true for showing indicator View
self.imageView.sd_setShowActivityIndicatorView(true)

//give style value
self.imageView.sd_setIndicatorStyle(UIActivityIndicatorView.Style.gray)

//Set your image as you are want to do
self.imageView.sd_setImage(with: URL(string: self.imageUrl), placeholderImage: UIImage())

Urinary

Answer 6

For Swift 5 users can use the SDWebImageManager this way

extension UIImageView {
    func getImage(url: String, placeholderImage:  UIImage?, success:@escaping (_ _result : Any? ) -> Void,  failer:@escaping (_ _result : Any? ) -> Void) {
        self.sd_imageIndicator = SDWebImageActivityIndicator.gray
        self.sd_setImage(with: URL(string: url), placeholderImage:  placeholderImage, options: SDWebImageOptions(rawValue: 0), completed: { image, error, cacheType, imageURL in
            // your rest code
            if error == nil {
                self.image = image
                success(true)
            }else {
                failer(false)
            }
        })
    }
}

Usage:-

        var imageFeatureImage: String = ""
        
        if !imageURL.contains("https://") {
            imageFeatureImage = BASE_URL_IMAGE+imageURL
        }
       yourimageView.getImage(url: (imageFeatureImage), placeholderImage: nil) { (success) in
           yourimageView.contentMode = .scaleAspectFill
        } failer: { (failed) in
           yourimageView.image = UIImage.init(named: "placeholder")
           yourimageView.contentMode = .scaleAspectFit
        }

Buie

Answer 7

Objective-C: SDWebImage (5.x.x)

[imgView setSd_imageIndicator:SDWebImageActivityIndicator.grayIndicator];
[imgView sd_setImageWithURL:[NSURL URLWithString: urlString] placeholderImage:nil];

Dactylography