如何在 android 中加载低质量图像然后加载高质量图像（就像 WhatsApp 个人资料图像一样）

Question

我正在寻找一种我可以使用的设计模式，以便在 android recyclerView 中我可以以低质量快速加载图像，然后还可以调用高质量图像之后覆盖低质量图像。我经常看到先加载低质量图像然后再加载高质量图像的情况。

但这是如何在回收站视图的适配器中完成的。现在我正在使用 picasso 进行缓存和图像加载。例如，这是一个 link 低质量图像：

http://example.com/lowQuality.jpg and likewise high quality http://example.com/highQuality.jpg

所以在我的 recyclerView 适配器中，如果我在 viewholder 中这样做：

public class SearchItemHolder extends RecyclerView.ViewHolder  {

        @BindView(R.id.iv)
        ImageView iv;

        @BindView(R.id.tv_description)
        TextView tv_description;

        public SearchItemHolder(View view) {
            super(view);
            ButterKnife.bind(this, view);
        }

        public void bindSearch(final SearchModel searchModel) {

            String description = searchModel.getProductName();
            final String imageLowQualityIDUrl = searchModel.getIdLowQualityImage();
            final String imageHighQualityIDUrl = searchModel.getIdHighQualityImage();

            tv_price.setText(price);
            tv_description.setText(description);



            Picasso.with(mContext).load(imageLowQualityIDUrl).into(iv);
//but how to switch it to high quality URL after its finished loading ?


        }
    }

明确地说，只要尚未加载高质量图像，我希望首先显示低质量图像。

更新：我真正想要的是我在应用程序上看到的效果，在这些应用程序中，低质量图像加载速度很快，然后几秒钟后它会过渡到更高质量。如果有其他工具或方法可以做到这一点，请告诉我。我想要与 whatsapp 个人资料图像相同的效果（它如何从质量差淡入质量好）。

Answer 1

我想我明白了，你想要一个像 WhatsApp 个人资料图片一样的效果。我认为这个过程取决于你的后端，你的后端应该有一种方法，默认情况下 resizes/compresses 原始图片和另一种保持原始尺寸图像的方法。

服务器伪代码示例

$image = image.jpg

$requestLowQuality = resizeThis($image)

 $requestHighQuality = $image.

因此，当您的应用在后台加载图片时，$requestLowQuality 的异步任务请求会加载低质量默认版本。但是当用户点击查看时，Asynctask 向服务器请求 $requestHighQuality

我认为 WhatsApp 就是这样做的。这就是为什么你必须等待一段时间才能让模糊的图片变得有质量。

Picasso 只会根据请求方法加载图像

兄弟祝你好运

Answer 2

我找到了 Glide 的解决方案。您可以指定要作为缩略图加载的低分辨率图像。您只需要：

private void loadImageThumbnailRequest() {  
// setup Glide request without the into() method
DrawableRequestBuilder<String> thumbnailRequest = Glide
    .with( context )
    .load( yourData.getLowQualityLink() );

// pass the request as a a parameter to the thumbnail request
Glide
    .with( context )
    .load( yourData.getHdUrl() )
    .thumbnail( thumbnailRequest )
    .into( imageView );
}

更多信息在source这里

Answer 3

我还从 Fresco 了解了如何做到这一点：

Uri lowResUri, highResUri;
DraweeController controller = Fresco.newDraweeControllerBuilder()
    .setLowResImageRequest(ImageRequest.fromUri(lowResUri))
    .setImageRequest(ImageRequest.fromUri(highResUri))
    .setOldController(mSimpleDraweeView.getController())
    .build();
mSimpleDraweeView.setController(controller);

好像和glide是一样的思路。此信息来自 fresco docs。

如何在 android 中加载低质量图像然后加载高质量图像（就像 WhatsApp 个人资料图像一样）

How to load low quality and then high quality image afterwards in android (just like WhatsApp profile image)

image

progressive-download

image-loading

android-recyclerview