firebase - Firebase Storage Flutter 显示图像加载时间过长

Question

我正在创建一种教程应用程序，并且必须通过分步教程显示来自 firebase 存储的图像。目前我正在使用 .getDownloadUrl 函数，并使用带有 URL 的缓存网络图像（外部库）显示图像。完成该步骤后，图像将被替换，加载图像至少需要 2-3 秒，并且可能会让用户非常恼火。此外，为了最大程度地减少延迟，我将附近的云存储位置转移到用户所在的位置，这略微提高了速度。除了将链接存储在 Cloud Firestore 上或在开始时将所有 URL 保存在一个列表中之外，是否有更好的方法来显示图像。

标签： firebaseflutterfirebase-storage

Answer 1

最常见的方法是压缩/调整图像大小（或两者兼而有之）。通过这样做，您有几个选择：

1.您可以默认显示缩略图，并且仅在用户请求时加载完整图像（或在后台加载）（例如，他们单击有关教程的详细信息）

2.根据屏幕尺寸加载不同版本的图像（您不需要在移动设备上显示用于桌面的图像）

3.用压缩后的图像替换旧图像。根据内容的不同，您可能不需要大于 200kb 的图像，这很慷慨。

您还可以考虑使用下一代格式存储图像，例如WebP，因为它被认为是最有效的图像类型之一。但是，并非所有设备都支持它，因此您需要包含一个后备类型。

您说您正在缓存图像，这是减少加载时间的一个很好的步骤。您还说您将存储位置转移到更靠近用户的位置。您还可以尝试找到更接近用户位置的 CDN （可能会减少收益）。

您似乎反对将 downloadUrls 存储在您的数据库中。这会有所帮助，因为您所要做的就是加载图像，而不是 ping 存储桶以获取 url，然后加载它。

您的用例的另一个潜在解决方案可能是下载本教程的图像以及下一个，因此当用户单击下一步时，图像已经下载。

不幸的是，您无能为力。图像中包含大量数据，并且需要一些时间来加载和渲染它