iOS WatchKit/Swift - 在 WKInterfaceTable 行中延迟加载图像

Question

在我的 Apple Watch 应用程序中，我有一个大约有 25 行的表格，每行都有一些文本和需要从互联网加载的图像。类似于 Instagram 风格的提要，但这些是每张约 8k 的个人资料图片。

当我根据传入的 JSON 数据构建表时，我所做的一切都是正确的，利用 WatchKit 的内置图像缓存来减少不必要的网络流量。

该应用程序“有效”并且图像显示正确。但问题是 View 需要 10-20 秒才能准备好与用户进行交互。在这 10-20 秒结束之前，滚动变慢，并且在所有图像加载完成之前按钮不会执行任何操作。

我想要的是在用户向下滚动时延迟加载图像的某种方式。

我已经尝试过实现分页解决方案，但这也有其缺点，并不能完全解决我原来的问题。

如果我只填充文本位(没有图像)，表格会立即显示并准备好进行交互。

---

***更新:Mike Swanson 在下面的回答非常彻底，确实解决了我的大部分问题。呆滞和阻塞已经消失。

我想为遇到类似问题的任何其他人发布最终代码。具体来说，我想展示我是如何实现后台调度的。

我现在还在主线程中临时将图像设置为占位符以显示事件。一旦实际图像加载并传输到 watch ，它就会被替换。我还改进了图像缓存键，以便在上传新图像时丢失。

新代码:

let qualityOfServiceClass = QOS_CLASS_BACKGROUND
let backgroundQueue = dispatch_get_global_queue(qualityOfServiceClass, 0)

i = 0
for p in self.profiles {
    if let profileId = p["id"] as? NSNumber {
        var profileIdStr = "\(profileId)"
        let row = self.profilesTable.rowControllerAtIndex(i) as! WatchProfileRow

        if let hasImage = p["has_image"] as? NSNumber {
            let profileImageCacheKey = "\(profileIdStr)-\(hasImage)"

            // if the image is already in cache, show it
            if self.device.cachedImages[profileImageCacheKey] != nil {
                row.profileImageThumbnail.setImageNamed(profileImageCacheKey)

                // otherwise, get the image from the cdn and cache it
            } else {
                if let imageHost = self.imageHost as String! {
                    var imageURL = NSURL(string: NSString(format: "%@%@-thumbnail?version=%@", imageHost, profileId, hasImage) as String)

                    var imageRequest = NSURLRequest(URL: imageURL!)

                    NSURLConnection.sendAsynchronousRequest(imageRequest, queue: NSOperationQueue.mainQueue()) {
                        (response, data, error) -> Void in
                        if error == nil {
                            row.profileImageThumbnail.setImageNamed("profile-placeholder")

                            dispatch_async(backgroundQueue, {
                                self.device.addCachedImageWithData(data, name: profileImageCacheKey)

                                dispatch_async(dispatch_get_main_queue(), { () -> Void in
                                    row.profileImageThumbnail.setImageNamed(profileImageCacheKey)
                                })
                            })
                        }
                    }
                } else {
                    row.profileImageThumbnail.setImageNamed("profile-placeholder")
                }
            }
        } else {
            row.profileImageThumbnail.setImageNamed("profile-placeholder")
        }

    }

    i++
}

---

原始代码:

i = 0
for p in self.profiles {
    if let profileId = p["id"] as? NSNumber {
        var profileIdStr = "\(profileId)"
        let row = self.profilesTable.rowControllerAtIndex(i) as! WatchProfileRow

        if let hasImage = p["has_image"] as? NSNumber {

            // if the image is already in cache, show it
            if self.device.cachedImages[profileIdStr] != nil {
                row.profileImageThumbnail.setImageNamed(profileIdStr)

            // otherwise, get the image from the cdn and cache it
            } else {
                if let imageHost = self.imageHost as String! {
                    var imageURL = NSURL(string: NSString(format: "%@%@-thumbnail?version=%@", imageHost, profileId, hasImage) as String)

                    var imageRequest = NSURLRequest(URL: imageURL!)

                    NSURLConnection.sendAsynchronousRequest(imageRequest, queue: NSOperationQueue.mainQueue()) {
                        (response, data, error) -> Void in
                        if error == nil {
                            var image = UIImage(data: data)
                            row.profileImageThumbnail.setImage(image)

                            self.device.addCachedImage(image!, name: profileIdStr)
                        }
                    }
                } else {
                    row.profileImageThumbnail.setImageNamed("profile-placeholder")
                }
            }
        } else {
            row.profileImageThumbnail.setImageNamed("profile-placeholder")
        }   
    }        
    i++
}

Answer 1

首先，WatchKit 中没有确定WKInterfaceTable 中当前位置的方法。这意味着您使用的任何逻辑都必须解决这个问题。

其次，看起来您正在发送一个异步网络请求，然后在您有数据时使用 setImage。 setImage 在将图像传输到设备之前将图像编码为 PNG，在您现有的代码中，这是在主线程上发生的。如果您不需要 PNG 图像，我会考虑使用 setImageData 发送 JPEG 编码数据，以进一步减少需要传输到 Watch 的字节数。

最后，您似乎在重复传输图像。一次使用 setImage，两次使用 addCachedImage。收到图像后，我建议分派(dispatch)到后台线程，然后使用 WKInterfaceDevice 的 addCachedImageWithData(可以安全地在后台线程上使用)发送跨数据。然后，在使用 setImageNamed 设置现在缓存的图像之前分派(dispatch)回主线程。