Android Glide：在加载实际图像之前显示模糊图像

Posted 2023-02-24

【中文标题】Android Glide：在加载实际图像之前显示模糊图像

【英文标题】：Android Glide: Show a blurred image before loading actual image

【发布时间】：2016-06-21 12:47:17

【问题描述】：

我正在开发一个向用户显示全屏图像的 android 应用。图像是从服务器获取的。我正在使用 Glide 来显示图像。但我想在显示实际图像之前显示一个非常小的模糊图像。图像缓存后，应直接显示全尺寸图像。

图像显示流程如下： - 如果是第一次下载图片，请先下载小尺寸图片，然后再下载全分辨率图片。 - 如果之前下载过图片，直接显示全尺寸图片。

我在 Glide 库中找不到任何方法，它告诉我文件是否存在于缓存中。

任何想法，如何做到这一点。

【参考方案1】：

Glide.with(context.getApplicationContext())
                        .load(Your Path)   //passing your url to load image.
                        .override(18, 18)  //just set override like this
                        .error(R.drawable.placeholder)
                        .listener(glide_callback)
                        .animate(R.anim.rotate_backward)
                        .centerCrop()
                        .into(image.score);

【讨论】：

你是伟大的老板...:)

@Hiren 我收到了cannot resolve method 'override(int, int)' erorr

惊人的答案，谢谢 :)

你确定它不会下载整个图像然后缩小它吗？

【参考方案2】：

使用 Glide v4：

Glide.with(context)
    .load(URL)
    .thumbnail(0.1f)
    .into(image_view)

【参考方案3】：

你可以从这个库中获得想法或使用这个库。

在 Android 中进行模糊和原始图像的 2 种方法。

1) 初始加载模糊图像服务器 URL 路径，一旦获得成功位图缓存机制加载原始（大）图像服务器 URL 路径。

第 1 点是可能的，我已经为您解答（请您的服务器团队获取模糊图像或低质量图像以进行模糊，然后加载大图像）。 APK Link

Glide.with(mContext)
    .load(image.getMedium())
            .asBitmap()
            .diskCacheStrategy(DiskCacheStrategy.ALL)
            .into(new SimpleTarget<Bitmap>() 
                @Override
                public void onResourceReady(Bitmap bitmap, GlideAnimation anim) 
                    // Do something with bitmap here.
                    holder.thumbnail.setImageBitmap(bitmap);
                    Log.e("GalleryAdapter","Glide getMedium ");

                    Glide.with(mContext)
                            .load(image.getLarge())
                            .asBitmap()
                            .diskCacheStrategy(DiskCacheStrategy.ALL)
                            .into(new SimpleTarget<Bitmap>() 
                                @Override
                                public void onResourceReady(Bitmap bitmap, GlideAnimation anim) 
                                    // Do something with bitmap here.
                                    holder.thumbnail.setImageBitmap(bitmap);
                                    Log.e("GalleryAdapter","Glide getLarge ");
                                
                            );
                
            );

2) Facebook 的 Fresco 是一个新的 Android 图像库。这是介绍该库的官方博客文章。它支持通过网络传输渐进式 JPEG 图像，这对于通过慢速连接显示大图像非常有帮助。可以看到图像质量逐渐提高。

Progressive JPEGs with Facebook Fresco

【参考方案4】：

使用 BitmapFactory.Options.inSampleSize 制作图像的下采样版本，然后上传两个版本。加载示例图像（这应该花费更少的时间），当下载更大的版本时，切换到那个。您还可以使用 TransitionDrawable 进行淡入淡出过渡。

【参考方案5】：

glide 有一个直接的方法：

val thumbnailRequest = Glide.with(this)
        .load("https://picsum.photos/50/50?image=0")

Glide.with(this)
        .load("https://picsum.photos/2000/2000?image=0")
        .thumbnail(thumbnailRequest)
        .into(imageThumbnail)

来自blog：

缩略图是动态占位符，可以从 Internet 加载。在加载和处理实际请求之前，将显示获取的缩略图。如果由于某种原因缩略图在原始图像之后到达，它将被关闭。

【参考方案6】：

您的服务器上必须有一个小尺寸和一个完整尺寸的图像。如果您使用 Firebase 作为后端，则可以使用 Firebase Resize Image Extension。一旦你有了一个小尺寸的图片 URL 和一个完整尺寸的图片 URL，你就可以像这样使用 Glide：

            Glide.with(context)
            .load(fullSizeImageUrl)          
            .thumbnail(
                Glide.with(context)
                    .load(smallSizeImageUrl)
            ).into(imageView)

你会得到那种模糊的效果，因为小尺寸的图像会很模糊

根据 Glide 文档： .thumbnail() 如果在此请求之前完成，则加载并显示由给定缩略图请求检索到的资源。最适合加载较小的缩略图资源，并且比完整大小的资源加载速度更快。无法保证请求实际完成的顺序。但是，如果拇指请求在完整请求之后完成，拇指资源将永远不会替换完整资源。

【参考方案7】：

这不是一个完美的方法，但它会是最简单的方法。

将 placeHolder 图像设置为模糊，并将其设置为滑行。那么它总是会显示模糊图像，然后在加载实际图像后它会出现。

你可以参考这段代码来使用 glide。

//crete this method into your Utils class and call this method wherever you want to use.
//you can set these placeHolder() and error() image static as well. I made it as comment inside this method, then no need to use [placeHolderUrl and errorImageUrl] parameters. remove it from this method.
public static void loadImage(final Activity context, ImageView imageView, String url, int placeHolderUrl, int errorImageUrl) 
    if (context == null || context.isDestroyed()) return;

    //placeHolderUrl=R.drawable.ic_user;
    //errorImageUrl=R.drawable.ic_error;
        Glide.with(context) //passing context 
                .load(getFullUrl(url)) //passing your url to load image.
                .placeholder(placeHolderUrl) //this would be your default image (like default profile or logo etc). it would be loaded at initial time and it will replace with your loaded image once glide successfully load image using url.
                .error(errorImageUrl)//in case of any glide exception or not able to download then this image will be appear . if you won't mention this error() then nothing to worry placeHolder image would be remain as it is.
                .diskCacheStrategy(DiskCacheStrategy.ALL) //using to load into cache then second time it will load fast.
                .animate(R.anim.fade_in) // when image (url) will be loaded by glide then this face in animation help to replace url image in the place of placeHolder (default) image.
                .fitCenter()//this method help to fit image into center of your ImageView 
                .into(imageView); //pass imageView reference to appear the image.

【参考方案8】：

使用BitmapFactory.Options.inSamleSize 加载图像的下采样版本。然后加载更大的图像并使用TransitionDrawable进行淡入淡出过渡

希望对您有所帮助！干杯！

【讨论】：

但是这种情况下，我需要下载大图，等图片下载完我什么都没有显示\