Question

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

当我根据传入的JSON数据构建表时，我正在利用WatchKit内置的图像缓存正确地做所有事情，以减少不必要的网络流量。

该应用＆＃34;工作＆＃34;并且图像正确显示。但问题是视图需要10-20秒才能为用户进行交互做好准备。在那些10-20秒之前，滚动缓慢，按钮不会做任何事情，直到所有图像都已加载。

我想要的是在用户向下滚动时延迟加载图片的方法。

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

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

***更新： Mike Swanson的回答非常彻底，确实解决了我的大部分问题。缓慢和阻碍已经消失。

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

我现在还在主线程中暂时将图像设置为占位符以显示活动。一旦实际图像加载并传输到手表，它就会被替换。如果上传了新图像，我还改进了图像缓存键。

新代码：

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两次。收到您的图片后，我建议您调度后台线程，然后使用WKInterfaceDevice的{{1}}（可以安全地在后台线程上使用）来发送数据。然后，在使用addCachedImageWithData设置现在缓存的图像之前，先调回主线程。

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

1 个答案: