加载较小分辨率的图像，直到完成下载较大分辨率的图像

Posted 2023-03-22

【中文标题】加载较小分辨率的图像，直到完成下载较大分辨率的图像

【英文标题】：Loading a smaller resolution image until the larger resolution one is done downloading

【发布时间】：2018-05-02 23:38:20

【问题描述】：

我正在使用 Firebase 存储、实时数据库以及几乎所有东西构建一个 android 应用程序。该应用程序将允许用户上传图片，并允许其他用户查看这些图片。目前我正在使用一个插件来调整图像大小和裁剪图像，然后将该图像的 800x800 分辨率版本存储在 Firebase 存储桶中，这就是其他用户所看到的。它运作良好，但我想删除 800x800 分辨率限制，以便使用高分辨率设备的用户可以看到质量更好的图像。问题是，我无法弄清楚最好的流程是什么。 目前，一旦我从 firebase 存储中获得了 downloadURL，我正在使用 Glide 库来处理加载图像。我想做的是让应用程序加载图像的低分辨率版本，比如当用户第一次将该图像滚动到视图中时，它会快速将一个 200x200 分辨率的小图像加载到视图中，但随后正在加载背景中的全尺寸分辨率。下载完完整分辨率的文件后，它将用完整分辨率的文件替换低质量的文件。

我在 Instagram 之类的应用中看到过类似的情况，如果用户上传了非常高质量的图片，当您第一次滚动该帖子进入视图时，图片会像素化并且不是那么好，但在一两秒后图像质量真的很高。 我可以使用 Firebase 函数处理支持的逻辑，以在上传图像后调整图像大小并存储 2 种不同的分辨率。我只是真的停留在它的加载端。我已经搜索，搜索和搜索，但我真的找不到太多关于它的信息。有很多关于为什么要这样做的文章，但我找不到任何真实的例子来说明你将如何实际完成这样的任务。

目前我的图片加载非常简单，文档推荐的方式...

Glide.with(this).load(imageURL).into(imageView);

我真的可以使用一些帮助来处理如何首先加载低分辨率图像，然后在项目显示一秒钟后加载高分辨率图像。谢谢。

【参考方案1】：

从 Glide 4.0 开始，有一种本地方式可以做到这一点，称为缩略图请求。

你可以这样做：

Glide.with(context)
  .load(url)
  .thumbnail(Glide.with(context).load(thumbnailUrl))
  .into(imageView);

更多信息请关注official Glide documentation。

【参考方案2】：

您可以先加载低分辨率图像，因为您知道它会相当快，然后在加载低分辨率图像后加载高分辨率图像。

Glide.with(this)
 .load(lowResImageUrl)
 .listener(new RequestListener<String, GlideDrawable>() 
     @Override
     public boolean onException(Exception e, String model, Target<GlideDrawable> target, boolean isFirstResource) 
         return false;
     

     @Override
     public boolean onResourceReady(GlideDrawable resource, String model, Target<GlideDrawable> target, boolean isFromMemoryCache, boolean isFirstResource) 
         Glide.with(yourContext).load(highResImage).into(imageView);
         return false;
     
 )
 .into(imageView)

【讨论】：

漂亮！谢谢，我想知道 Glide 是否支持某种回调。

recyclerview 会出错

这将使 Glide 4+ 上的应用程序崩溃，您应该使用缩略图请求选项。

【参考方案3】：

使用 Glide 4.X 您可以直接拨打.thumbnail("quality you want to load") 您不需要为单个图像维护 2 个 URL。

GlideApp.with(context).load("High resolution image URL")
                    .placeholder(R.drawable.placeholder)
                    .thumbnail(0.3f) //Quality 0.1 - 1.0
                    .into(imageHolder);

希望对你有帮助。

【讨论】：

thumbnail(float sizeMultiplier) 不是为了控制质量，而是控制图像的大小：以与此请求相同的方式加载资源，除了目标的尺寸乘以给定的大小乘数 根据doc

【参考方案4】：

如果您使用 Kotlin，我建议您使用 Coin 库而不是 glide。

https://github.com/coil-kt/coil

它很轻巧，开箱即用，可以满足您的需求。 即：生成一个较低分辨率的图像，直到整个图像都在内存中