Skip to main content

Loading images asynchronously

There are a few details that need to be paid attention to when loading images from URLs in your Swift code:
  • loading and decoding the image on a background thread
  • updating the UIImageView on the main thread
  • not starting too many parallel downloads
  • cancelling downloads when images are not needed anymore
I recommend to use one of the two popular libraries that do the trick in just a few lines of code: SDWebImage or Kingfisher. Both are easy to get via CocoaPods and are quite similar in API and supported features.

SDWebImage

After adding the SDWebImage pod to the project:
pod 'SDWebImage'
Given an image view and a URL to load the image from, loading the image with an activity indicator is as simple as:
import UIKit
import SDWebImage

class ExampleViewController: UIViewController {
    
    @IBOutlet weak var imageView : UIImageView!
    
    // ...
    
    func loadImage() {
        let imageURL = URL(string: "https://upload.wikimedia.org/wikipedia/commons/1/15/Red_Apple.jpg")!
        imageView.sd_setShowActivityIndicatorView(true)
imageView.sd_setIndicatorStyle(.gray)
imageView.sd_setImage(with: imageURL)
    }
    
}

Kingfisher

Pretty much the same for Kingfisher:
pod 'Kingfisher'
Loading an image from an URL with activity indicator and displaying it in the image view:
import UIKit
import Kingfisher

class ExampleViewController: UIViewController {
    
    @IBOutlet weak var imageView : UIImageView!
    
    // ...
    
    func loadImage() {
        let imageURL = URL(string: "https://upload.wikimedia.org/wikipedia/commons/1/15/Red_Apple.jpg")!
        imageView.kf.indicatorType = .activity
imageView.kf.setImage(with: imageURL)
    }
    
}
There is a nice cheat sheet that demonstrates common cases like customizing the indicator or getting notified when downloads complete.

Differences between the libraries: SDWebImage vs. Kingfisher

  • SDWebImage supports progressive display of the image while loading is in progress via options: [.progressiveDownload] which is nice when loading larger images. This is not supported in Kingfisher as of now.
  • SDWebImage has support for Webp images included as a subspec that works out of the box, while for Kingfisher it’s an external plugin KingfisherWebP that requires extra configuration - for applications that have a lot of resources, webp helps delivering higher quality with shorter download times.
  • SDWebImage is implemented in Objective-C, Kingfisher in Swift 4.

Example project

Here is an example project that includes an example for both libraries which are included via CocoaPods:

Comments

Post a Comment

Popular posts from this blog

Swift GCD part 1: Thread safe singletons

Preview Singletons are entities, referenced to the same instance of a class from everywhere in your code. It doesn't matter if you like them or not, you will definitely meet them, so it's better to understand how they work. Constructing and handling a set of data doesn't seem to be a big challenge at first glance. The problems appear when you try to optimise the user experience with background work and your app starts acting weird. ??‍♂️ After decades of watching your display mostly with a blank face, you finally realize that your data isn't handled consistently by the manager because you're accessing it (running tasks on it) from multiple threads at the same time. So you really do have to deal with making your singletons thread safe. This article series is dedicated to thread handling using Swift. In the first part below you will get a comprehensive insight into som...
Post a Comment
Read more

Thread safe singleton’s in Swift

What are singletons? — Singleton is design patterns which says that there should be only one instance of the class for the lifetime of the application. One the best example of Singleton is AppDelegate . How to write a singleton class ? class DefaultDict{ private var dict:[String:Any] = [:] public static let sharedManager = DefaultDict() private init(){ } public func set(value:Any,key:String){ dict[key] = value } public func object(key:String) -> Any?{ dict[key] } public func reset(){ dict.removeAll() } }   Testing singleton class under concurrent circumstances. We are going to write an example where we will set values in dict from various threads and even try to access some with different threads. When we do this we will encounter a crash. If you look closely it will be because of race condition and the crash will be on line set(value:Any,key:String) . class ViewController: UIViewController { ...
Post a Comment
Read more

Frame vs Bounds in iOS

This article is a repost of an answer I wrote on Stack Overflow . Short description frame = a view’s location and size using the parent view’s coordinate system ( important for placing the view in the parent) bounds = a view’s location and size using its own coordinate system (important for placing the view’s content or subviews within itself) Details To help me remember frame , I think of a picture frame on a wall . The picture frame is like the border of a view. I can hang the picture anywhere I want on the wall. In the same way, I can put a view anywhere I want inside a parent view (also called a superview). The parent view is like the wall. The origin of the coordinate system in iOS is the top left. We can put our view at the origin of the superview by setting the view frame’s x-y coordinates to (0, 0), which is like hanging our picture in the very top left corner of the wall. To move it right, increase x, to move it down increase y. To help me remember bound...
Post a Comment
Read more