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

Question

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

androidandroid-glide

20

我正在开发一款Android应用程序，该应用程序向用户显示全屏图像。这些图像从服务器获取。我正在使用Glide来显示图像。但是我希望在显示实际图像之前显示一个非常小的模糊图像。一旦图像被缓存，直接显示全尺寸图像。

图像显示流程如下： - 如果第一次下载图像，则首先下载小规模图像，然后下载全尺寸图像。 - 如果图像以前已经下载过，则直接显示全尺寸图像。

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

有什么想法，如何完成此操作。

- Abhishek Batra

8个回答

14

使用Glide v4：

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

- itzhar

5

您可以从这个库中获取灵感或使用此库。

在Android中实现模糊和原始图像有两种方法。

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

第一点是可行的，我为您找到了答案（请向您的服务器团队请求获取模糊图像或低质量图像以进行模糊处理，然后加载大图像）。 APK链接

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图像，可以在慢速连接下显示大型图像非常有帮助。用户可以逐步看到图像质量的提高。

使用Facebook Fresco实现渐进式JPEG

- Karthik Kamatchi

1

使用BitmapFactory.Options.inSampleSize制作图像的缩小版本，并上传两个版本。加载示例图像（应该需要较少时间），当下载大版本时，切换到该版本。您还可以使用TransitionDrawable进行淡入淡出过渡。

- jv110

1

这不是完美的方法，但这将是最简单的方法。

将占位图像设置为模糊并将其设置到Glide中。然后它将始终显示模糊图像，然后在加载实际图像后它会出现。

您可以参考此代码来使用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.
}

- Abdul Rizwan

1

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)

来自博客：

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

- Rahul Tiwari

1

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

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

你会得到模糊的效果，因为小尺寸图像会变得模糊。

根据 Glide 文档:

.thumbnail() 如果缩略图请求完成于此请求之前，则加载和显示所检索的资源。最适用于加载比完整大小资源更小且将更快加载的缩略图资源。无法保证请求实际完成的顺序。但是，如果缩略图请求在完整请求之后完成，则缩略图资源永远不会替换完整资源。

- Syed Umair

-2

使用BitmapFactory.Options.inSampleSize来加载图像的缩小版本。然后加载较大的图像，并使用TransitionDrawable进行淡入淡出过渡。

希望这能帮到你！干杯！

- Milind Vyas

1

但在这种情况下，我需要下载大图像，直到图像下载完成之前，我将无法显示任何内容。 - Abhishek Batra

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Hiren · Accepted Answer

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);