Perfomance issues when loading remote images in a map callout bubble

Question

In my app I need to display stores around the user location. Each store has name, tagline, and a logo, and we want to display all these information on the callout bubble that comes up on the map once I touch a pin. Considering that I need to load the image remotely, and that waiting three seconds to see the callout after touching the pin is not acceptable, what would be the best solution? The file of an array of around 20 stores is like 10kb, but if we load the logo for all of them straight away, maybe it would be like 110kb (considering an estimate of 5kb per image), which I`m not sure if it is a good idea.

Answer 1

In one of my project that case works just fine. I'm using SDWebImage for the remote async load of the image.

I did:

subclass the MKPinAnnotationView:

.h

@interface TLStoreResultMapAnnotationView : MKPinAnnotationView

@property (assign)BOOL imageSet;

@end

.m

#import "TLStoreResultMapAnnotationView.h"
#import "TLStoreResultMapAnnotation.h"
#import "UIImageView+WebCache.h"

@implementation TLStoreResultMapAnnotationView
@synthesize imageSet=_imageSet;

- (void)layoutSubviews {

    if(self.selected && (!self.imageSet)) {
        TLStoreResultMapAnnotation *annotation = (TLStoreResultMapAnnotation *)self.annotation;

        NSURL *url = [NSURL URLWithString:[annotation.store.imageURL stringByAddingPercentEscapesUsingEncoding:NSUTF8StringEncoding]];

        UIImageView *storeImageView = (UIImageView *)self.leftCalloutAccessoryView;
        storeImageView.frame = CGRectMake(storeImageView.frame.origin.x,storeImageView.frame.origin.y,30.0,30.0);
        storeImageView.contentMode = UIViewContentModeScaleAspectFill;
        storeImageView.clipsToBounds = YES;
        [storeImageView setImageWithURL:url
                  placeholderImage:[UIImage imageNamed:@"webloading.png"] options:SDWebImageCacheMemoryOnly];


        self.imageSet = YES;
    }

    [super layoutSubviews];
    UIImageView *storeImageView = (UIImageView *)self.leftCalloutAccessoryView;
    storeImageView.frame = CGRectMake(storeImageView.frame.origin.x,storeImageView.frame.origin.y,30.0,30.0);
}

@end

of course your need to adapt the code a bit.