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

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...

RxSwift - Giới thiệu

Bạn có nghe qua về Reactive Programming chưa, đây là một khái niệm lập trình hoàn toàn mới. “Reactive Programming là lập trình theo hướng bất đồng bộ các dòng chảy dữ liệu(data streams)” Sau khi đọc khái niệm các bạn có lẽ rất mơ hồ, vậy các data streams là gì. Vậy để mình ví dụ cho các bạn: - Trong lập trình bình thường ( imperative programming ) a = b + c , tức a được gắn với kết quả cộng của b và c .Khi b với c thay đổi thì tất nhiên sẽ không ảnh hưởng tới a, nhưng trong Reactive Programming này a sẽ tự động thay đổi khi b hoặc c thay đổi, kết quả của a sẽ lập tức thay đổi theo. Vậy tại sao nên dùng RXSwift: + Giúp ứng dụng của bạn hoạt động 1 cách như là real time update ui khi có thay đổi data flow, mang đến trải nghiệm tuyệt vời cho User. + Dễ dàng lập trình bất đồng bộ (Async) thay vì phải dùng : callbacks, delegates, notifications, kvo… Bạn phải dùng nhiều thứ gây ra ứng dụng của bạn phức tạp, khó kiểm soát. + Chuyển đổi các thread khi thực hiện 1 cách...

Different between Map and FlatMap in RX

In short, the map applies a function to each emitted element and returns its result. Observable<Integer> observable = Observable . just (1,2,3) .map(x -> 10 * x); observable.subscribe(System. out ::println); Result: 10 20 30 So FlatMap applies a function to each emitted element, but this function returns the type of the Observable. I.e. 1 emitted by an element through a flatMap to generate a set of emitted elements or not one. Observable<String> observable = Observable . just ( "A" , "B" , "C" ) .flatMap(s -> { System. out .println(); return Observable. just (s + "1" , s + "2" , s + "3" ); }); observable.subscribe(s -> System. out .print(s + " " )); Result: A1 A2 A3 B1 B2 B3 C1 C2 C3