iOS Development - Do you really know how to use SDWebImage?

[[166005]]

SDWebImage is currently the most popular third-party framework for image downloading and is used very frequently. But do you really know how to use it? This article will analyze how to use SDWebImage reasonably through examples.

Usage scenario: There are pictures to be displayed on the custom UITableViewCell. When the network status is WiFi, the high-definition picture should be displayed; when the network status is cellular mobile network, the picture thumbnail should be displayed. The following figure shows an example:

The pictures shown in the figure meet the download requirements according to the network status

• Since the network status needs to be monitored, I recommend using AFNetWorking here.

1) Import the third-party framework AFNetWorking into the project on GitHub or using cocoaPod.

2) Listen to the network status in the application:didFinishLaunchingWithOptions: method in the AppDelegate.m file.

 // In the AppDelegate.m file
 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
 {
 // Monitor network status
    [[AFNetworkReachabilityManager sharedManager] startMonitoring];
 }
 // The following code is used in the method that needs to monitor the network status
 AFNetworkReachabilityManager * mgr = [AFNetworkReachabilityManager sharedManager];
 if (mgr.isReachableViaWiFi) { // Using Wifi, download the original image
 } else { // Others, download thumbnails
 }
 }

• At this time, some iOS learners will start to complain: Isn’t this very simple? So they wrote the following code in no time.

   // Using MVC, download the image when setting the cell's model properties
   - setItem:(CustomItem *)item
   {
   _item = item;
      UIImage * placeholder = [UIImage imageNamed:@"placeholderImage"];
      AFNetworkReachabilityManager * mgr = [AFNetworkReachabilityManager sharedManager];
   if (mgr.isReachableViaWiFi) { // Using Wifi, download the original image
          [self.imageView sd_setImageWithURL:[NSURL URLWithString:item.originalImage] placeholderImage:placeholder];
   } else { // Others, download thumbnails
          [self.imageView sd_setImageWithURL:[NSURL URLWithString:item.thumbnailImage] placeholderImage:placeholder];
   }
   }

• At this point, it is indeed possible to download the corresponding images according to the current network status, but in real development, this is actually unreasonable. The following are the details that need attention:

1) SDWebImage will automatically help developers cache images (including memory cache and sandbox cache), so we need to set the high-definition images that users download in a WiFi environment. The next time you open the app in a cellular network state, the high-definition images should also be displayed instead of downloading thumbnails.

2) Many application settings modules have a function: still display high-definition images under mobile network environment. This function actually records the settings in the sandbox. For information about saving data locally, you can refer to my other article on the homepage of Jianshu: iOS local data access. Just read here.

3) When the user is offline, the business cannot be handled properly.

• So, I started to improve it. To make it easier for you, the reader, to understand, I will post the pseudo code first:

   - setItem:(CustomItem *)item
   {
   _item = item;
   if (there is an original image in the cache)
   {
   self.imageView.image = original image;
   } else
   {
   if (Wifi environment)
   {
   Download to display the original image
   } else if (mobile phone has built-in network)
   {
   if (still download the original image in 3G\4G environment)
   {
   Download to display the original image
   } else
   {
   Download thumbnail
   }
   } else
   {
   if (there is a thumbnail in the cache)
   {
   self.imageView.image = thumbnail;
   } else // Handle offline status
   {
   self.imageView.image = placeholder image;
   }
   }
   }
   }

• Implement the pseudocode above: Readers can correspond to the pseudocode above one by one. When practicing, it is recommended to write pseudocode first, then write real code

• Pay more attention to the "Notes" explanations.

 - setItem:(CustomItem *)item
 {
 _item = item;
 // Placeholder image
    UIImage * placeholder = [UIImage imageNamed:@"placeholderImage"];
 // Get the original image from the memory\sandbox cache,
    UIImage * originalImage = [[SDImageCache sharedImageCache] imageFromDiskCacheForKey:item.originalImage];
 if (originalImage) { // If the original image is in the memory\sandbox cache, then display the original image directly (regardless of the current network status)
 self.imageView.image = originalImage ;
 } else { // Memory\Sandbox cache does not have the original image
        AFNetworkReachabilityManager * mgr = [AFNetworkReachabilityManager sharedManager];
 if (mgr.isReachableViaWiFi) { // Using Wifi, download the original image
            [self.imageView sd_setImageWithURL:[NSURL URLWithString:item.originalImage] placeholderImage:placeholder];
 } else if (mgr.isReachableViaWWAN) { // Using the mobile phone's built-in network
 // The user's configuration items are assumed to be stored in the sandbox using NSUserDefaults
            // [[NSUserDefaults standardUserDefaults] setBool:NO forKey:@"alwaysDownloadOriginalImage"];
            // [[NSUserDefaults standardUserDefaults] synchronize];
 #warning Read the user's configuration item from the sandbox: whether to still download the original image in a 3G\4G environment
            BOOL alwaysDownloadOriginalImage = [[NSUserDefaults standardUserDefaults] boolForKey:@"alwaysDownloadOriginalImage"];
 if (alwaysDownloadOriginalImage) { // Download the original image
                [self.imageView sd_setImageWithURL:[NSURL URLWithString:item.originalImage] placeholderImage:placeholder];
 } else { // Download thumbnails
                [self.imageView sd_setImageWithURL:[NSURL URLWithString:item.thumbnailImage] placeholderImage:placeholder];
 }
 } else { // No network
            UIImage * thumbnailImage = [[SDImageCache sharedImageCache] imageFromDiskCacheForKey:item.thumbnailImage];
 if (thumbnailImage) { // There is a thumbnail in the memory\sandbox cache
 self.imageView.image = thumbnailImage ;
 } else { // Handle offline state and the situation when there is no cache
 self.imageView.image = placeholder ;
 }
 }
 }
 }

Solved? The real pit has just begun.

• Before describing the pitfalls of the above code, let's first analyze the caching mechanism of UITableViewCell.

• Please see the figure below: there is a tableView that is displaying three UITableViewCells at the same time. Each tableViewCell contains an imageView subcontrol, and each cell has a corresponding model property used to set the image content of the imageView.

• Note: Since no cell is pushed off the screen, the buffer pool is empty at this time.

The cell has not yet been pushed into the cache pool

When a cell is pushed off the screen, the system will automatically put the cell into the automatic cache pool. Note: The UIImage image data model corresponding to the cell is not cleared! It still points to the last used cell.

The cell is put into the cache pool

When the next cell enters the screen, the system will find the corresponding cell according to the identifier registered by the tableView and use it. The cell that entered the cache pool is added back to the tableView, and the model data corresponding to the cell is set in the tableView's Data Source method tableView: cellForRowAtIndexPath:. The corresponding cell is shown in the figure below:

The cell is put into the cache pool

• The above is a brief introduction to the tableView reuse mechanism.

Coming back to the topic above, where is the real pitfall?

Let's use a scenario to describe it: When the WiFi speed in the user's environment is not fast enough (the image cannot be downloaded immediately), and in the above code, a high-definition image is downloaded in the WiFi environment. So it takes a certain amount of time to complete the download. At this time, the user does not want to wait and wants to see the image displayed when the App was last opened. At this time, the user will slide to the cell below to view it. Note: At this time, the download operation of the cell above is not paused and is still in the downloading state. When the user is viewing the displayed image of the last time the App was opened (the image downloaded last time the App was opened, SDWebImage will help us cache it, without downloading it), and the cell that needs to display the image when the App was opened last time is a cell taken from the cache pool using the tableView reuse mechanism. When the high-definition image of the cell above has been downloaded, the default practice of SDWebImage is to immediately set the downloaded image to ImageView, so we will display the image above in the cell displayed below, causing data confusion, which is a very serious BUG.

So how to solve this thorny problem?

If we can remove the download operation before putting the cell into the cache pool when the cell is taken out of the cache pool for use, there will be no data confusion.

At this point you might ask me: How do I remove the download operation? Isn't the download operation done for us by SDWebImage?

That's right, it is SDWebImage that helps us download pictures. Let's take a look at the SDWebImage source code to see how it is done.

 - (void)sd_setImageWithURL:(NSURL *)url placeholderImage:(UIImage *)placeholder options:(SDWebImageOptions)options progress:(SDWebImageDownloaderProgressBlock)progressBlock completed:(SDWebImageCompletionBlock)completedBlock {
 // Close the download operation of the current image
    [self sd_cancelCurrentImageLoad];
    objc_setAssociatedObject(self, &imageURLKey, url, OBJC_ASSOCIATION_RETAIN_NONATOMIC);
    if (!(options & SDWebImageDelayPlaceholder)) {
        dispatch_main_async_safe(^{
 self.image = placeholder ;
 });
 }
 if (url) {
        // check if activityView is enabled or not
        if ([self showActivityIndicatorView]) {
            [self addActivityIndicator];
 }
        __weak __typeof(self) wself = self;
        id operation = [SDWebImageManager.sharedManager downloadImageWithURL:url options:options progress:progressBlock completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType, BOOL finished, NSURL *imageURL) {
            [wself removeActivityIndicator];
            if (!wself) return;
            dispatch_main_sync_safe(^{
                if (!wself) return;
                if (image && (options & SDWebImageAvoidAutoSetImage) && completedBlock)
 {
                    completedBlock(image, error, cacheType, url);
 return;
 }
                else if (image) {
 wself.image = image;
                    [wself setNeedsLayout];
 } else {
                    if ((options & SDWebImageDelayPlaceholder)) {
 wself.image = placeholder ;
                        [wself setNeedsLayout];
 }
 }
                if (completedBlock && finished) {
                    completedBlock(image, error, cacheType, url);
 }
 });
 }];
        [self sd_setImageLoadOperation:operation forKey:@"UIImageViewImageLoad"];
 } else {
        dispatch_main_async_safe(^{
            [self removeActivityIndicator];
            if (completedBlock) {
                NSError * error = [NSError errorWithDomain:SDWebImageErrorDomain code:-1 userInfo:@{NSLocalizedDescriptionKey : @"Trying to load a nil url"}];
                completedBlock(nil, error, SDImageCacheTypeNone, url);
 }
 });
 }
 }

We were surprised to find that when SDWebImage downloads a picture, the first thing it does is to close the current download operation of imageView!

Are you beginning to marvel at how amazing SDWebImage is? That's right, we just need to use SDWebImage to set up all the direct access to local cache code in the code we wrote!

Here is the finished code.

 - setItem:(CustomItem *)item
 {
 _item = item;
 // Placeholder image
    UIImage * placeholder = [UIImage imageNamed:@"placeholderImage"];
 // Get the original image from the memory\sandbox cache
    UIImage * originalImage = [[SDImageCache sharedImageCache] imageFromDiskCacheForKey:item.originalImage];
 if (originalImage) { // If the original image is in the memory\sandbox cache, then display the original image directly (regardless of the current network status)
        [self.imageView sd_setImageWithURL:[NSURL URLWithString:item.originalImage] placeholderImage:placeholder];
 } else { // Memory\Sandbox cache does not have the original image
        AFNetworkReachabilityManager * mgr = [AFNetworkReachabilityManager sharedManager];
 if (mgr.isReachableViaWiFi) { // Using Wifi, download the original image
            [self.imageView sd_setImageWithURL:[NSURL URLWithString:item.originalImage] placeholderImage:placeholder];
 } else if (mgr.isReachableViaWWAN) { // Using the mobile phone's built-in network
 // The user's configuration items are assumed to be stored in the sandbox using NSUserDefaults
            // [[NSUserDefaults standardUserDefaults] setBool:NO forKey:@"alwaysDownloadOriginalImage"];
            // [[NSUserDefaults standardUserDefaults] synchronize];
 #warning Read the user's configuration item from the sandbox: whether to still download the original image in a 3G\4G environment
            BOOL alwaysDownloadOriginalImage = [[NSUserDefaults standardUserDefaults] boolForKey:@"alwaysDownloadOriginalImage"];
 if (alwaysDownloadOriginalImage) { // Download the original image
                [self.imageView sd_setImageWithURL:[NSURL URLWithString:item.originalImage] placeholderImage:placeholder];
 } else { // Download thumbnails
                [self.imageView sd_setImageWithURL:[NSURL URLWithString:item.thumbnailImage] placeholderImage:placeholder];
 }
 } else { // No network
            UIImage * thumbnailImage = [[SDImageCache sharedImageCache] imageFromDiskCacheForKey:item.thumbnailImage];
 if (thumbnailImage) { // There is a thumbnail in the memory\sandbox cache
                [self.imageView sd_setImageWithURL:[NSURL URLWithString:item.thumbnailImage] placeholderImage:placeholder];
 } else {
                [self.imageView sd_setImageWithURL:nil placeholderImage:placeholder];
 }
 }
 }
 }

This article ends here. If you have any questions or errors, please point them out.