Как отображать данные изображения в чате из url для JSQMessagecontroller для ios

Question

Я разрабатываю приложение чата, в котором мне нужно отображать текст, изображения, видео, которые я получаю от json. для отображения данных изображения существует метод в рамках JSQ:

NSData *data = [NSData dataWithContentsOfURL:[NSURL URLWithString:entity.image.imageUrl]]; 
UIImage *imageFromUrl = [UIImage imageWithData:data]; 
JSQPhotoMediaItem *photoItem = [[JSQPhotoMediaItem alloc] initWithImage:imageFromUrl]; 
JSQMessage *photoMessage = [[JSQMessage alloc] initWithSenderId:senderId senderDisplayName:displayName date:entity.messageDate media:photoItem]; 

, но это займет много времени для загрузки, как я должен отобразить большое количество изображений. так как отображать изображение с url в чате async?

Answer 1

Я хотел бы взглянуть на

self.sd_setImageWithURL(NSURL!, forState: UIControlState, placeholderImage: UIImage!, options: SDWebImageOptions)

и в этом случае я бы ваш взгляд изображения. Существует несколько различных методов с различными вариантами. Это асинхронный вызов, поэтому он не блокирует ваш пользовательский интерфейс, и если вы используете .RefreshCached как ваш options:, он будет обновляться при возврате вызова.

Answer 2

Это, как я сделал:

#import "JSQPhotoMediaItem.h" 

@interface ChatAsyncPhoto : JSQPhotoMediaItem 

@property (nonatomic, strong) UIImageView *asyncImageView; 

- (instancetype)initWithURL:(NSURL *)URL; 

@end 

#import "ChatAsyncPhoto.h" 
#import "UIColor+JSQMessages.h" 
#import "JSQMessagesMediaPlaceholderView.h" 
#import "UIImageView+WebCache.h" 

@implementation ChatAsyncPhoto 

- (instancetype)init 
{ 
    return [self initWithMaskAsOutgoing:YES]; 
} 

- (instancetype)initWithURL:(NSURL *)URL { 
    self = [super init]; 
    if (self) { 
     CGSize size = [self mediaViewDisplaySize]; 

     self.asyncImageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, size.width, size.height)]; 
     self.asyncImageView.contentMode = UIViewContentModeScaleToFill; 
     self.asyncImageView.clipsToBounds = YES; 
     self.asyncImageView.layer.cornerRadius = 20; 
     self.asyncImageView.backgroundColor = [UIColor jsq_messageBubbleLightGrayColor]; 

     UIView *activityIndicator = [JSQMessagesMediaPlaceholderView viewWithActivityIndicator]; 
     activityIndicator.frame = self.asyncImageView.frame; 

     [self.asyncImageView addSubview:activityIndicator]; 

     UIImage *image = [[SDImageCache sharedImageCache] imageFromDiskCacheForKey:URL.absoluteString]; 
     if(image == nil) 
     { 
      [self.asyncImageView sd_setImageWithURL:URL completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType, NSURL *imageURL) { 
       if (error == nil) { 
        [self.asyncImageView setImage:image]; 
        [activityIndicator removeFromSuperview]; 
       } else { 
        NSLog(@"Image downloading error: %@", [error localizedDescription]); 
       } 
      }]; 
     } else { 
      [self.asyncImageView setImage:image]; 
      [activityIndicator removeFromSuperview]; 
     } 
    } 

    return self; 
} 

#pragma mark - JSQMessageMediaData protocol 
- (UIView *)mediaView 
{ 
    return self.asyncImageView; 
} 

#pragma mark - NSCoding 
- (instancetype)initWithCoder:(NSCoder *)aDecoder 
{ 
    NSLog(@"init coder has not been implemented"); 

    return self; 
} 

@end 

Затем вы можете использовать класс следующим образом:

ChatAsyncPhoto *photoItem = [[ChatAsyncPhoto alloc] initWithURL:[NSURL URLWithString:messageItem.content]]; 
JSQMessage *message = [[JSQMessage alloc] initWithSenderId:messageItem.userInfo.id 
             senderDisplayName:messageItem.userInfo.username 
                 date:[DateUtil getTimeDateStringFromDate:messageItem.createdDate] 
                media:photoItem]; 
[self.chatData.messages addObject:message];