肇鑫的技术博客

业精于勤,荒于嬉

UIImageView异步加载导致问题的解决

UIImageView加载了一张图片之后,如果再加载另外一张图片,然后立即删除第二张图片。则UIImageView会变黑。

演示代码如下:

import UIKit

class ViewController: UIViewController {
    lazy var image = { () -> UIImage? in
        guard let path = Bundle.main.path(forResource: "poster_icon_mac_1024", ofType: "png") else {
            return nil
        }
        
        return UIImage(contentsOfFile: path)
    }()
    
    lazy var replaceImage = { () -> UIImage? in
        guard let path = Bundle.main.path(forResource: "Miss Devil 恶魔人事·椿真子.Miss.Devil.Jinji.no.Akuma.Tsubaki.Mako.Ep05.Chi_Jap.HDTVrip.1280X720-0001", ofType: "png") else {
            
            return nil
        }
        
        return UIImage(contentsOfFile: path)
    }()
    
    lazy var saveImageURL = { () -> URL in
        let baseURL = FileManager.default.urls(for: .cachesDirectory, in: .userDomainMask).first
        let fileName = UUID().uuidString + ".jpg"
        
        return URL(fileURLWithPath: fileName, isDirectory: false, relativeTo: baseURL)
    }()
    
    var latestImage:UIImage? = nil

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        
        addImage()
        
        DispatchQueue.main.asyncAfter(wallDeadline: .now() + .seconds(2)) { [unowned self] in
            self.createImage()
            self.loadImage()
            self.changeImageViewToLatestImage()
            self.removeLatestImage()
        }
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

    @IBOutlet weak var imageView: UIImageView!
    
    func addImage() {
        imageView.image = image
    }
    
    func changeImage() {
        imageView.image = replaceImage
    }
    
    func createImage() {
        let imageData = UIImageJPEGRepresentation(replaceImage!, 1.0)
        FileManager.default.createFile(atPath: saveImageURL.path, contents: imageData!, attributes: nil)
    }
    
    func loadImage() {
        latestImage = UIImage(contentsOfFile: saveImageURL.path)
    }
    
    func changeImageViewToLatestImage() {
        imageView.image = latestImage
    }
    
    func removeLatestImage() {
        try! FileManager.default.removeItem(at: saveImageURL)
    }
}

分析与解决

这个问题的造成,是因为为了性能,UIImageView其实是异步加载的。在它加载完成之前,如果图片被删除了,就会加载不到,变黑。

有人提出,可以将图片通过Data类型,加载到内存中,然后将内存中的图片加载到UIImageView的方式,来绕过这个问题。这个思路的确能解决这个问题,但是毕竟多占用了内存。不算是最好的方式。

其实,我们知道了原理,就等UIImageView加载完成之后,再删除图片就好了。虽然苹果并没有告诉我们图片何时加载好。但是我们知道,类似更新UI的这种操作,必然是在UI线程完成的,即main线程。那么我们只需要在main队列排队一下就可以了。

将代码

DispatchQueue.main.asyncAfter(wallDeadline: .now() + .seconds(2)) { [unowned self] in
    self.createImage()
    self.loadImage()
    self.changeImageViewToLatestImage()
    self.removeLatestImage()
}

改成

DispatchQueue.main.asyncAfter(wallDeadline: .now() + .seconds(2)) { [unowned self] in
    self.createImage()
    self.loadImage()
    self.changeImageViewToLatestImage()

    DispatchQueue.main.async { [unowned self] in
        self.removeLatestImage()
    }
}

思考

为什么上面的代码会成功呢?这是因为第一段代码的运行顺序是

DispatchQueue.main.asyncAfter(wallDeadline: .now() + .seconds(2)) { [unowned self] in
    self.createImage()
    self.loadImage()
    self.changeImageViewToLatestImage() // 异步操作,押后运行
    self.removeLatestImage() // 先删除了图片,之后才进行的图片加载
}

而修改之后的代码是

DispatchQueue.main.asyncAfter(wallDeadline: .now() + .seconds(2)) { [unowned self] in
    self.createImage()
    self.loadImage()
    self.changeImageViewToLatestImage() // 异步操作1,押后运行

    DispatchQueue.main.async { [unowned self] in // // 异步操作2,押后运行
        self.removeLatestImage()
    }
}

由于main队列是一个包执行完成之后,才会执行下一个。因此实际上修改后的代码是在图片加载完成之后才删除图片的。这就避免了这个问题。

循环结构中异步代码实现灵活退出(下)

循环结构中异步代码实现灵活退出(上)

上一篇中,我们实现了基本结构。但是如果每次都这么做,会比较麻烦。这一篇中,我们尝试将代码封装起来,这样以后我们再做时,只需调用一次就可以了。

首先,我们将之前的代码变成closure。

import Cocoa

class ViewController: NSViewController {
    private let semaphore = DispatchSemaphore(value: 0)
    private let concurrentQueue = DispatchQueue.global()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        concurrentQueue.async {
            self.run()
        }
    }
    
    private func run() {
        for i in 1...10 {
            print(i)
            
            if shouldBreak(i, withClosure: { (result) in
                DispatchQueue.main.async {
                    self.textView.string += "\(i)\n"
                }
                
                if i == 5 {
                    result = true
                }
            }) {
                break
            }
        }
    }
    
    private func shouldBreak(_ i:Int, withClosure closure: @escaping (inout Bool) -> ()) -> Bool {
        var result = false
        let delayInSeconds = Int(arc4random() % 3)
        
        concurrentQueue.asyncAfter(wallDeadline: .now() + .seconds(delayInSeconds)) {
            closure(&result)
            
            self.semaphore.signal()
        }
        
        semaphore.wait()
        
        return result
    }

    @IBOutlet var textView: NSTextView!
}

接下来,我们新建一个文件RangeEnumerator.swift,扩展Sequence

import Foundation

extension Sequence {
    public func breakableForEach(closureWithCondition: @escaping (Element, inout Bool)->()) {
        let semaphore = DispatchSemaphore(value: 0)
        
        DispatchQueue.global().async {
            for e in self {
                if self.shouldBreak(semaphore, e, withClosure: closureWithCondition) {
                    break
                }
            }
        }
    }
    
    private func shouldBreak(_ semaphore:DispatchSemaphore, _ e:Element, withClosure closure: @escaping (Element, inout Bool) -> ()) -> Bool {
        var result = false
        let delayInSeconds = Int(arc4random() % 3)
        
        DispatchQueue.global().asyncAfter(wallDeadline: .now() + .seconds(delayInSeconds)) {
            closure(e, &result)
            semaphore.signal()
        }
        
        semaphore.wait()
        
        return result
    }
}

之后,最初的代码就可以简化为。

class ViewController: NSViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        
        (1...10).breakableForEach { (i, result) in
            DispatchQueue.main.async {
                self.textView.string += "\(i)\n"
            }

            if i == 5 {
                result = true
            }
        }
    }
    
    @IBOutlet var textView: NSTextView!
}

另外,由于扩展中不能创建存储变量,所以,之前的信号量和队列,就必须放在函数里了。

循环结构中异步代码实现灵活退出(上)

在同步代码时,循环要提前退出十分简单。

for i in 1...10 {
    print(i)
    
    if i == 5 {
        break
    }
}

但是在异步代码中,要灵活退出就不那么容易了。比如,在调用RestAPI时,如果一切正常,就执行下一次循环,如果出错,则进行提示用户,进行重试或者退出。这个就属于异步操作。

import Cocoa

class ViewController: NSViewController {
    private let concurrentQueue = DispatchQueue.global()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        run()
    }
    
    private func run() {
        for i in 1...10 {
            print(i)
            
            if shouldBreak(i) {
                break
            }
        }
    }
    
    private func shouldBreak(_ i:Int) -> Bool {
        var result = false
        let delayInSeconds = Int(arc4random() % 3)

        concurrentQueue.asyncAfter(wallDeadline: .now() + .seconds(delayInSeconds)) {
            if i == 5 {
                result = true
            }
        }
        
        return result
    }
}

由于采用了异步,shouldBreak(_ i:Int) -> Boolresult是先于DispatchQueue.main.async中的代码执行的。因此输出始终是1-10

为保证执行的顺序,需要使用信号量。

import Cocoa

class ViewController: NSViewController {
    private let semaphore = DispatchSemaphore(value: 0)
    private let concurrentQueue = DispatchQueue.global()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        run()
    }
    
    private func run() {
        for i in 1...10 {
            print(i)
            
            if shouldBreak(i) {
                break
            }
        }
    }
    
    private func shouldBreak(_ i:Int) -> Bool {
        var result = false
        let delayInSeconds = Int(arc4random() % 3)

        concurrentQueue.asyncAfter(wallDeadline: .now() + .seconds(delayInSeconds)) {
            if i == 5 {
                result = true
            }
            
            self.semaphore.signal()
        }
        
        semaphore.wait()
        
        return result
    }
}

代码执行正确。下面我们加入改变UI的部分。添加一个NSTextView,让它显示每次的i

import Cocoa

class ViewController: NSViewController {
    private let semaphore = DispatchSemaphore(value: 0)
    private let concurrentQueue = DispatchQueue.global()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        run()
    }
    
    private func run() {
        for i in 1...10 {
            print(i)
            
            if shouldBreak(i) {
                break
            }
        }
    }
    
    private func shouldBreak(_ i:Int) -> Bool {
        var result = false
        let delayInSeconds = Int(arc4random() % 3)

        concurrentQueue.asyncAfter(wallDeadline: .now() + .seconds(delayInSeconds)) {
            DispatchQueue.main.async {
                self.textView.string += "\(i)\n"
            }
            
            if i == 5 {
                result = true
            }
            
            self.semaphore.signal()
        }
        
        semaphore.wait()
        
        return result
    }
    
    @IBOutlet var textView: NSTextView!
}

代码执行后,我们会发现,textView中的i,不是一行一行显示的,而是一开始不显示,然后一下子都显示出来。这和我们期望的不符。

这是什么原因造成的呢?其实,这是因为视图控制器中的代码,默认运行在图形线程,因此semaphore.wait()其实每次都阻塞了图形线程。这导致textView一直没法刷新。直到循环跳出后,界面才成功刷新。

知道了原因,解决办法就有了。将代码从默认的图形线程中移除即可。最终代码:

import Cocoa

class ViewController: NSViewController {
    private let semaphore = DispatchSemaphore(value: 0)
    private let concurrentQueue = DispatchQueue.global()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        concurrentQueue.async {
            self.run()
        }
    }
    
    private func run() {
        for i in 1...10 {
            print(i)
            
            if shouldBreak(i) {
                break
            }
        }
    }
    
    private func shouldBreak(_ i:Int) -> Bool {
        var result = false
        let delayInSeconds = Int(arc4random() % 3)

        concurrentQueue.asyncAfter(wallDeadline: .now() + .seconds(delayInSeconds)) {
            DispatchQueue.main.async {
                self.textView.string += "\(i)\n"
            }
            
            if i == 5 {
                result = true
            }
            
            self.semaphore.signal()
        }
        
        semaphore.wait()
        
        return result
    }
    
    @IBOutlet var textView: NSTextView!
}

循环结构中异步代码实现灵活退出(下)